如何让Bootstrap列自动占用行内未被使用的空白宽度

问题原因 #

你代码中出现的空白是Bootstrap固定宽度栅格的特性导致的：你给#left指定了col-sm-3，在sm及以上视口下它会固定占12栅格里的3份宽度，和内部内容实际宽度无关，内部内容没占满时就会出现空白；而#middle指定了col-sm-6固定占6份宽度，自然不会自动填充左侧的空白。

实现方案 #

Bootstrap内置方案（推荐，无需额外写CSS）

Bootstrap自带flex自适应列类，直接修改列的类名即可实现需求：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <!-- col-sm-auto：宽度由内容自动撑开，无多余空白 -->
    <div class="col-sm-auto" id="left">
      <div class="row">
        <div class="col-sm-1">1</div>
        <div class="col-sm-1">2</div>
        <div class="col-sm-1">3</div>
      </div>    
    </div>
    <!-- col-sm：自动占用行内剩余所有可用空间，自动贴合left右侧 -->
    <div class="col-sm" id="middle">get me lefter, to the unoccupied space</div>
    <div class="col-sm-3" id="right"></div>
  </div>
</div>

这个方案完全遵循Bootstrap的设计规范，所有现代浏览器都兼容，响应式逻辑和原有代码一致，sm断点以下列依旧会自动堆叠。

自定义CSS方案

如果不想修改原有类名，可以添加以下CSS实现：

/* 对应Bootstrap sm断点，仅在≥576px的视口下生效 */
@media (min-width: 576px) {
  #left {
    flex: 0 0 auto;
    width: auto !important;
  }
  #middle {
    flex: 1 1 auto;
    width: auto !important;
  }
}

注意该方案需要用!important覆盖原有固定列宽的样式，优先级处理不当可能会导致样式失效，更推荐用内置类方案。

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