Bootstrap 5 - 几列宽度正常，但其中一列占据了 space 的其余部分

Question

如果我有一个场景使用 Bootstrap 5 喜欢...

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
  </div>
</div>

所有列目前都采用其内容需要的任何宽度。

我希望第二列在不影响第一列和第二列显示的情况下尽可能宽。

单独使用 Bootstrap 是否可行，还是我需要依赖额外的 CSS 样式？

Answer 1

刚找到答案。使除我要占用的所有列之外的所有列都占据 space col-auto。制作那个 class="col".

<div class="container">
  <div class="row">
    <div class="col-auto">One</div>
    <div class="col">Two</div>
    <div class="col-auto">Three</div>
  </div>
</div>

Bootstrap 5 - 几列宽度正常，但其中一列占据了 space 的其余部分

Bootstrap 5 - several columns with normal width but one that takes up the rest of the space

css

col

bootstrap-5