bootstrap-4 - 基于表格内容的列自动宽度

Question

我可以在表(或类似的东西)中使用 col-{breakpoint}-auto 吗？

Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content.

Answer 1

您也可以在

.col-auto

md .col-auto width: 100%;

.col-auto form fields

<table class="table">
  <thead>
    <tr>
      <th scope="col" class="col-auto">#</th>
      <th scope="col" class="col-md-auto">First</th>
      <th scope="col" class="col-md-auto">Last</th>
      <th scope="col" class="col-md-auto">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

关于bootstrap-4 - 基于表格内容的列自动宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48029040/

上一篇：reactjs - 在移动期间响应 native 停止平移手势

下一篇：Django - 将表单数据转换为 REST API，POST 请求

相关文章：

html - 悬停时制作 React Bootstrap NavDropdown 下拉菜单

jquery - 在 Bootstrap 4 中显示链接

javascript - 如何在 bootstrap 4 桌面模式下将内容推送到下拉菜单？

javascript - 解析 Javascript 数组以引导 div 和行

html - 多级菜单无响应？

javascript - 带有 CSS 的 Bootstrap 类

html - Bootstrap 4 全宽轮播

html - 在输入焦点上更改 FA SVG 图标颜色

jquery - 设置数据表长度菜单的自定义位置

html - 步进进度条在手机上是水平的

©2023 IT工具网  联系我们

中使用它们，但据我所知 是表列的默认行为。看看下面的例子。当全屏查看时(在 断点上方)，所有列都表现为 .但是，在断点下方，具有指定宽度的第一列(示例中的第二列，带有 )占用了其他列的所有可用空间。此外，作为另一个使用示例，Bootstrap 文档提到 在 的上下文中以及。