时间戳

首页 > 解决方案 > Bootstrap：收缩列

css - Bootstrap：收缩列

问题描述

我有一个带有树列的表。我希望“小”列尽可能小。

我认为col-auto 会这样做：

使用 col-{breakpoint}-auto 类根据其内容的自然宽度调整列的大小。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
 <tr>
  <td>big1</td>
  <td class="col-auto">small</td>
  <td>big2</td>
 </tr>
</table>

如何缩小“小”列并将空间留给其他列？

标签： csstwitter-bootstrapflexbox

解决方案

类col-auto使用flex规则，但您的父容器未定义为display: flex. 侧标签td应设置为flex: 1.

.table.table-bordered tr {
  display: flex;
}

.table.table-bordered tr td:nth-child(1),
.table.table-bordered tr td:nth-child(3) {
  flex: 1;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
 <tr>
  <td>big1</td>
  <td class="col-auto">small</td>
  <td>big2</td>
 </tr>
</table>

推荐阅读