Bootstrap网格在动态宽度容器内失效，如何不修改外部自定义网格解决？

嘿，这个问题我太熟了！咱们先搞清楚为啥会出问题：你的自定义左右列是固定宽度+浮动布局，中间列用calc计算剩余宽度，但Bootstrap的网格系统依赖正确的容器内边距和盒模型适配——row默认带左右负margin（用来抵消列的内边距），当父容器是你这种计算宽度的浮动元素时，这个负margin会让row直接超出中间列的边界，导致col-md-6的布局完全错乱。

好在完全不用修改你那套外部自定义网格样式，给你两个简单的解决方案：

方案1：嵌套Bootstrap的container-fluid #

这是最贴合Bootstrap设计逻辑的方法，只需要在中间列的row外面套一层container-fluid：

<div class="c-row">
 <div class="c-col-left">content</div>
 <div class="c-col-center">
  <!-- 新增container-fluid，自动适配父容器宽度并抵消row的负margin -->
  <div class="container-fluid">
    <div class="row">
     <div class="col-md-6">c1</div>
     <div class="col-md-6">c2</div>
    </div>
  </div>
 </div>
 <div class="c-col-right">content</div>
</div>

container-fluid会自动设置左右15px的padding，刚好抵消row的负margin，同时它的宽度是100%，完美适配中间列的calc计算宽度，内部的Bootstrap网格就能正常响应式布局了。

方案2：给中间列添加适配样式 #

如果不想嵌套额外容器，也可以给中间列加个自定义类来修正布局：

/* 新增这个样式，不用修改原有自定义网格代码 */
.c-col-center.fix-bootstrap-grid {
  overflow: hidden; /* 裁剪row超出的部分 */
  padding-left: 15px;
  padding-right: 15px; /* 抵消row的负margin */
}

然后给中间列加上这个类：

<div class="c-col-center fix-bootstrap-grid">
  <div class="row">
   <div class="col-md-6">c1</div>
   <div class="col-md-6">c2</div>
  </div>
</div>

这个方法通过裁剪溢出和内边距抵消，让内部的Bootstrap网格能在中间列的宽度范围内正常工作。

为啥移除width: calc(...)后会正常？其实那只是个假象——移除宽度后，中间列作为浮动元素会收缩到内容宽度，row会撑满这个收缩后的宽度，看起来网格正常，但这并不是你想要的“占满剩余宽度”的效果，咱们上面的方案才是真正解决问题的办法。

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