允许 Bootstrap 列在一行中使用未占用的 space 宽度

Question

如果您运行以下代码并将鼠标悬停在呈现的元素上，您会看到 left 和 middle 元素之间有一个未占用的 space :

<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-3" 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>
    <div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
    <div class="col-sm-3" id="right"></div>
  </div>
</div>

...这是您将看到的内容（紫色是未占用的 space）：

是否可以添加 CSS 以稳健地告诉 left 让 middle 使用未占用的 space， 如果存在 ?
另外，Bootstrap 有一些内置的 CSS 吗？

Answer 1

我认为这是因为您定义了将要使用的列 (col-sm-3)。

根据您的约束（不重组 HTML），您可以将 #left div 的 class 修改为 col-sm-auto，它告诉 #left 只占用它需要的 space 这样就没有未使用的 space 和 #middle 可以占用旧的未使用的 space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-auto" id="left">
      <div class="row">
        <div class="col-sm-auto">1</div>
        <div class="col-sm-auto">2</div>
        <div class="col-sm-auto">3</div>
      </div>    
    </div>
    <div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
    <div class="col-sm-3" id="right"></div>
  </div>
</div>

注意项目 1、2 和 3 上的 class col-sm-auto。还要告诉他们使用所需的宽度，而不是定义 12 列中的 1 列，这样就不会出现未使用的 space制作。

允许 Bootstrap 列在一行中使用未占用的 space 宽度

Allow Bootstrap columns to use unoccupied space width within a row

css

twitter-bootstrap

bootstrap-5