Bootstrap 引导CSS网格未对齐

0yg35tkg 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(212)

新的 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

twitter-bootstrap

来源：https://stackoverflow.com/questions/74407249/bootstrap-css-grid-not-aligning

2条答案

按热度按时间

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>

字符串

赞(0）回复(0）举报 2022-12-16

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

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 引导CSS网格未对齐

2条答案

相关问题

热门标签

最新问答