Bootstrap 3移动端col-xs-6不生效，需实现一行2个盒子布局

嘿，刚上手Bootstrap很容易踩栅格嵌套的小坑，我来帮你搞定这个问题～

问题根源 #

你的代码里，带col-xs-6的盒子被放在了普通的#middleBox div里，而不是Bootstrap要求的.row容器中。Bootstrap 3的栅格系统有严格的层级规则：
.container → .row → .col-*
如果要嵌套列，必须在已有的.col-*内部再新建一个.row，子列必须作为这个新.row的直接子元素，才能触发栅格的布局逻辑。

修改后的代码示例 #

调整结构，给#middleBox加上.row类（或者直接替换成.row），让col-xs-6成为它的直接子元素：

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-12" id="middleBoxMargin"> 
      <!-- 给middleBox加上row类，让它成为栅格行容器 -->
      <div id="middleBox" class="row"> 
        <div id="groupInsurance" class="col-xs-6 group-insurance">你的内容</div>
        <!-- 第二个盒子同样用col-xs-6，确保一行两个 -->
        <div id="anotherInsurance" class="col-xs-6 group-insurance">你的内容</div>
      </div>
    </div>
  </div>
</div>

关键说明 #

• Bootstrap的.row会创建负边距，抵消父容器的内边距，同时让内部的.col-*元素正确浮动排列。没有.row包裹的话，col-xs-6的宽度设置和浮动规则不会生效。
• 确保每个.row内部的列宽度总和不超过12（两个col-xs-6加起来刚好12，完美适配移动端一行两盒的需求）。

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