Bootstrap自动布局网格中响应式表格布局异常问题

问题描述 #

在使用Bootstrap自动布局网格（仅用col类，不指定具体列宽）时，若列内包含响应式表格，会出现列被撑开后被迫换行的问题。虽然给列添加col-4这类固定宽度类能恢复正常布局，但这种方式需要跟踪列数量，无法自由增减列项，不符合需求。

复现代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
    ></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <div class="container text-center">
      <div class="row">
        <div class="col">
          Column
          <div class="table-responsive">
            <table class="table table-striped">
              <tr>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>
  </body>
</html>

问题原因 #

Bootstrap的col类基于Flex布局，默认配置为flex-grow: 1、flex-basis: 0%，但Flex子项的默认最小宽度是内容本身的宽度。当表格内容较宽时，会把所在列的最小宽度撑大，导致所有列的总宽度超过容器宽度，最终触发列换行。

解决方案 #

给包含表格的col元素添加min-width: 0样式，打破Flex子项的最小宽度限制，让列可以正常收缩以适应自动布局。具体有两种实现方式：

方式一：内联样式直接修改 #

<div class="col" style="min-width: 0;">
  Column
  <div class="table-responsive">
    <table class="table table-striped">
      <tr>
        <td>XXXXXX XXX</td>
        <td>XXXXXX XXX</td>
        <td>XXXXXX XXX</td>
        <td>XXXXXX XXX</td>
        <td>XXXXXX XXX</td>
      </tr>
    </table>
  </div>
</div>

方式二：自定义CSS类 #

先定义CSS类：

.col-table-wrapper {
  min-width: 0;
}

然后给目标列添加该类：

<div class="col col-table-wrapper">
  <!-- 表格内容 -->
</div>

这样修改后，既能保持自动布局的灵活性（可自由增减列项，无需跟踪列数量），又能避免表格破坏原有网格布局。

内容的提问来源于stack exchange，提问作者Adam Youngers