Bootstrap 4移动端两列无法自动堆叠的问题求助

嘿，我一眼就看出问题所在啦！Bootstrap 4的网格系统对结构的要求比Bootstrap 3更严格，你的代码结构不符合它的规则，所以才会失效～

问题根源 #

你在一个.col-*元素里直接嵌套了另外两个.col-*，但Bootstrap 4明确要求：所有列（.col-*）必须是行（.row）的直接子元素，否则网格的间距、布局规则都不会正常生效。这就是为什么你的代码在Bootstrap 3里能跑，到4里就不行了。

修正后的代码 #

按照Bootstrap 4的规范调整结构，就能实现你要的“中等屏幕一行两列，移动端自动堆叠”的效果：

<div class="row">
  <!-- 外层列实现内容居中，中等屏幕占10列，小屏幕占满宽度 -->
  <div class="col-md-10 col-sm-12 mx-auto">
    <!-- 必须添加这个内部.row来为子列提供正确的网格上下文 -->
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <img src="my source" alt="My alt" />
      </div>
      <div class="col-md-6 col-sm-12">
        <h2>My title</h2>
        <p>My text</p>
      </div>
    </div>
  </div>
</div>

代码说明 #

• 外层的.col-md-10 mx-auto：让内容在中等屏幕（≥768px）时占据10列宽度并水平居中，小屏幕（<768px）时自动占满12列宽度。这里用mx-auto代替原来的offset-md-1是Bootstrap 4推荐的更简洁的居中方式，当然你也可以保留offset-md-1，效果是一样的。
• 内部的.row：这是关键！它为两个子列提供了正确的网格布局环境，确保.col-md-6在中等屏幕上各占50%宽度，.col-sm-12在小屏幕上自动切换为100%宽度，实现堆叠效果。

这样调整后，就能完美匹配你期望的布局啦～

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