关于Bootstrap col-md-6在平板模式下失效的技术求助

这事儿其实是Bootstrap网格的断点触发逻辑在搞鬼——它的网格类只在屏幕宽度大于等于对应断点时才生效，一旦屏幕尺寸低于断点，列就会默认占满12个网格单位（也就是垂直堆叠）。

先拆解你的代码问题： #

你用的col-md-6，只在**md断点（≥768px，大概是大平板/小桌面的宽度）及以上才会分成两列；当屏幕宽度小于768px（比如小平板、手机），这个类就失效了，列自动变成col-12，自然就堆叠起来了。
同理，col-sm-4只在sm断点（≥576px，小平板宽度）**及以上生效，小于576px的手机屏幕同样会堆叠。

针对你的需求，给几个精准的解决方案： #

1. 从「小平板（≥576px）」开始一直到桌面都保持两列

把col-md-6换成col-sm-6，这样从sm断点往上的所有屏幕（小平板、大平板、桌面）都是两列，只有小于576px的小屏手机会堆叠：

<div class="row">
  <div class="col-sm-6" style="background-color:green; border:1px solid"> col-sm-6 </div>
  <div class="col-sm-6" style="background-color:green; border:1px solid"> col-sm-6 </div>
</div>

2. 所有屏幕尺寸（包括手机）都保持两列，永不堆叠

直接用col-6（xs断点可以省略不写），这样不管屏幕多大，列都会均分两格：

<div class="row">
  <div class="col-6" style="background-color:green; border:1px solid"> col-6 </div>
  <div class="col-6" style="background-color:green; border:1px solid"> col-6 </div>
</div>

3. 进阶：不同断点用不同布局（比如平板两列，桌面三列）

如果之后需要更灵活的布局，比如小屏手机堆叠、平板两列、桌面三列，可以叠加多个断点类：

<div class="row">
  <div class="col-sm-6 col-lg-4" style="background-color:blue; border:1px solid"> 混合布局 </div>
  <div class="col-sm-6 col-lg-4" style="background-color:blue; border:1px solid"> 混合布局 </div>
  <div class="col-sm-6 col-lg-4" style="background-color:blue; border:1px solid"> 混合布局 </div>
</div>

最后补个小知识点： #

Bootstrap网格类的命名逻辑是col-{断点}-{份数}，其中xs（<576px）是默认断点，可以直接写成col-{份数}；如果只写大断点的类（比如col-md-6），就相当于给小屏幕默认设置了col-12，这就是你看到堆叠的原因～

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