Bootstrap 引导CSS网格未对齐

0yg35tkg  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(200)

新的 Bootstrap ,使用版本5-2-0

在我的布局中,我想让猫的图像占据一边,然后让内容和表单占据另一边(内容在前,表单在后),但我无法让它工作。

<div class="grid">
  <div class="g-col-6 g-start-1">
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div class="g-col-6 g-start-6">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
  </div>
  <div class="g-col-6 g-start-6">form</div>
</div>

代码编号https://codepen.io/emmabbb/pen/ExRmgZE

nvbavucw

nvbavucw1#

这个应该够了。

代码:

<div class="row">
  <div class="col-6">
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div class="col-6">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
    <div>form</div>
  </div>
</div>

字符串

polhcujo

polhcujo2#

在您的代码中,缺少https://getbootstrap.com/docs/5.2/assets/css/docs.css的样式表。
此外,您还需要从g-start-7(而不是g-start-6)开始,因为1-6用于第一列,7-12用于第二列

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">   

    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">

<div class="grid">
  <div class="g-col-6">
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div class="g-col-6 g-start-7">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
  </div>
  <div class="g-col-6 g-start-7">form</div>
</div>

查看更多详情:https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works

相关问题