如何在邻列为空时自动拉伸Bootstrap列？（工具：Bootstrap、.less）

当然有办法啦！结合你使用的Bootstrap和Less，我给你两种实用的实现思路：

方案一：利用Bootstrap Flex特性（推荐Bootstrap 4+） #

Bootstrap 4及以上的row默认是flex容器，我们可以借助flex的自动填充特性来实现。只需要做两处小调整：

1. 给左侧的col-md-9添加flex-grow-1类，同时保留原有的栅格类，这样当右侧列有内容时，它依然保持75%的宽度；当右侧列无内容时，会自动填满剩余空间。
2. 给右侧的col-md-3添加一个判断：如果里面没有内容，就让它隐藏（避免占用布局空间）。

修改后的代码如下：

HTML调整 #

<section class="document-viewer fadeIn">
  <div class="tb-container">
    <div class="row">
      <div class="col-md-9 flex-grow-1 main-col"> stuff in here </div>
      <div class="col-md-3 sidebar-col">
        <div class="something"> sometimes stuff in here, but not always </div>
        <div class="something"> ... </div>
      </div>
    </div>
  </div>
</section>

Less样式 #

// 当侧边栏无内容时隐藏它
.sidebar-col:empty {
  display: none;
}

// 兜底确保主列在侧边栏隐藏时占满宽度
.sidebar-col:empty ~ .main-col {
  flex: 0 0 100%;
  max-width: 100%;
}

方案二：纯Less动态控制栅格类 #

如果你更倾向于通过修改栅格类来实现，可以用Less的条件判断和父元素状态来切换列宽：

假设我们给父容器row添加自定义类dynamic-columns，然后通过Less判断侧边栏是否有内容，来切换主列的宽度：

Less代码 #

.dynamic-columns {
  .main-col {
    // 默认保持col-md-9的样式
    @media (min-width: 768px) {
      flex: 0 0 75%;
      max-width: 75%;
    }
  }

  // 当侧边栏无内容时，主列切换为col-md-12的样式
  .sidebar-col:empty {
    display: none;
    ~ .main-col {
      @media (min-width: 768px) {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  }
}

HTML调整 #

<section class="document-viewer fadeIn">
  <div class="tb-container">
    <div class="row dynamic-columns">
      <div class="col-md-9 main-col"> stuff in here </div>
      <div class="col-md-3 sidebar-col">
        <div class="something"> sometimes stuff in here, but not always </div>
        <div class="something"> ... </div>
      </div>
    </div>
  </div>
</section>

小提醒 #

• 如果你用的是Bootstrap 3，因为它的栅格基于浮动，需要额外处理浮动和清除逻辑，建议优先升级到Bootstrap 4+简化实现。
• :empty选择器会严格判断元素是否无内容（包括空格和换行），如果侧边栏里有空白字符，要么清理掉这些空白，要么用JavaScript判断内容是否为空并添加类名来辅助控制。

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