Bootstrap列宽自动调整：移除第三列时让第二列占用其空间

嘿，这个布局需求Bootstrap完全能搞定，而且有几种不同的实现方式，我给你整理了最实用的几个：

方法1：纯CSS自动适配（无需修改JS/动态类） #

如果不想折腾JS动态添加类，可以用CSS的相邻兄弟选择器来自动判断第三列是否存在，然后调整第二列的宽度。

假设你的HTML结构是这样的：

<div class="container">
  <div class="col-md-3">第一列</div>
  <div class="col-md-6">第二列</div>
  <!-- 第三列可能存在也可能不存在 -->
  <div class="col-md-3">第三列</div>
</div>

添加这段CSS即可：

/* 当第二列后面没有第三个col-md-3时，把第二列宽度改成75%（对应col-md-9） */
@media (min-width: 768px) {
  .col-md-3:first-child + .col-md-6:not(+ .col-md-3) {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

这个方法的好处是完全不需要额外的JS或模板逻辑，CSS会自动检测第三列的存在状态并调整布局。

方法2：利用Bootstrap Flex类（更原生） #

Bootstrap 4及以上支持flex布局类，我们可以借助flex-grow-1让第二列在没有第三列时自动填满剩余空间：

调整你的HTML结构：

<div class="container d-flex flex-wrap">
  <div class="col-md-3 flex-shrink-0">第一列</div>
  <div class="col-md-6 flex-grow-1">第二列</div>
  <!-- 第三列可选 -->
  <div class="col-md-3 flex-shrink-0">第三列</div>
</div>

这里的flex-shrink-0保证第一、第三列不会被压缩，flex-grow-1让第二列在没有第三列时自动占满剩下的空间。当第三列存在时，它会占据自己的3份宽度，第二列保持6份，完美适配两种场景。

方法3：动态切换类（适合JS/后端渲染场景） #

如果你的页面是通过JS动态控制第三列的显示/隐藏，或者在后端模板里判断是否渲染第三列，可以直接给第二列动态切换类：

• 当第三列存在时，第二列用col-md-6
• 当第三列不存在时，第二列用col-md-9

比如在Vue里可以这样写：

<div class="container">
  <div class="col-md-3">第一列</div>
  <div :class="hasThirdCol ? 'col-md-6' : 'col-md-9'">第二列</div>
  <div v-if="hasThirdCol" class="col-md-3">第三列</div>
</div>

这种方法最直接，逻辑清晰，适合需要精确控制的场景。

注意：以上方法都适用于Bootstrap 4及以上版本，如果还在使用Bootstrap 3（float布局），可以把CSS里的flex相关属性换成width和float，比如：

@media (min-width: 768px) {
  .col-md-3:first-child + .col-md-6:not(+ .col-md-3) {
    width: 75%;
    float: left;
  }
}

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