如何让Bootstrap网格的大元素自动填充当前行剩余空间？

针对你的需求，基于Bootstrap 4+的栅格系统，给big元素设置统一的类 col flex-grow-1 即可实现预期布局，同时确保所有元素都包裹在同一个 row 容器内。

为什么这个方案有效 #

• col 作为栅格基础类，让big元素纳入Bootstrap的12列布局体系；
• flex-grow-1 强制big元素填充当前行的剩余空间，不会被后续的small元素挤压宽度；
• Bootstrap的row是flex容器，当总列宽超过12时，后续元素会自动换行，完美支持big元素之后继续排列small元素的场景。

示例代码 #

<div class="row">
  <!-- 场景1：big在开头，占满整行（col-12） -->
  <div class="col flex-grow-1 big">Big</div>
  <div class="col-4 small">Small</div>
  <div class="col-4 small">Small</div>

  <!-- 场景2：前面有1个small，big占8列 -->
  <div class="col-4 small">Small</div>
  <div class="col flex-grow-1 big">Big</div>
  <div class="col-4 small">Small</div>

  <!-- 场景3：前面有2个small，big占4列 -->
  <div class="col-4 small">Small</div>
  <div class="col-4 small">Small</div>
  <div class="col flex-grow-1 big">Big</div>
  <div class="col-4 small">Small</div>
</div>

如果仍在使用Bootstrap 3（float布局），可以自定义一个类来实现：

.big {
  float: left;
  width: auto;
  overflow: hidden;
}

使用时直接给big元素加这个类，small元素保持col-4（对应v3的col-xs-4等），同样包裹在row内即可。

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