Bootstrap 5 自动调整列宽

Question

使用以下代码 (pen here)，我尝试使用自动边距自动调整第二列宽度以适应其内容，但这似乎不起作用。

.col {
  border: 1px solid red;
}
.autofit {
  margin: auto;
  width: auto;
  max-width: auto;
}

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

<div class="row m-5">
  <div class="col">1</div>
  <div class="col autofit">2*</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

还有其他自动调整列宽的方法吗？

我也试过width: fit-content(100px);，但也没用...

Answer 1

您可以为此使用 Bootstrap-class .col-auto。简单有效！

.col, .col-auto {
  border: 1px solid red;  
}

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

<div class="row m-5">
  <div class="col">1</div>
  <div class="col-auto">2*</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

Bootstrap 5 自动调整列宽

Bootstrap 5 autofit column width

html

css

twitter-bootstrap

bootstrap-5