新的 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>
2条答案
按热度按时间nvbavucw1#
这个应该够了。
代码:
字符串
polhcujo2#
在您的代码中,缺少https://getbootstrap.com/docs/5.2/assets/css/docs.css的样式表。
此外,您还需要从
g-start-7
(而不是g-start-6)开始,因为1-6用于第一列,7-12用于第二列查看更多详情:https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works