Bootstrap 5.2.0网格布局对齐异常求助：图片与内容表单布局失效

你的问题出在右侧的内容区块和表单区块都单独使用了g-col-6 g-start-6类，这会让两个区块在网格的同一位置重叠，无法实现上下排列的效果。

正确的做法是把右侧的内容和表单放在同一个g-col-6容器内，这样它们会在右侧列中自动上下堆叠，左侧单独用一个g-col-6放置图片即可。修正后的代码如下：

<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">
    <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>

补充说明：

• g-start-1属于多余设置，Bootstrap网格列默认从左侧起始位置排列，无需额外指定。
• 同一列内的元素会按照文档流顺序自动上下排列，不用给每个元素单独设置网格类。

内容的提问来源于stack exchange，提问作者Emma Stone