含col-auto与大表格的Grid布局问题：表格换行解决方法

问题核心是Bootstrap的.col类默认带有min-width: auto属性，在flex布局中，这个属性会阻止列收缩到小于其子元素的最小宽度。当你添加多列大表格后，表格的最小宽度超过了右侧列的剩余可用空间，触发了Grid行默认的flex-wrap: wrap，导致表格所在列被挤到新行。

解决方案 #

给右侧的.col添加min-width: 0，打破默认的最小宽度限制，让列可以收缩到小于表格的最小宽度，同时保留.table-responsive的横向滚动功能。

代码示例 #

内嵌样式写法

<div class="row">
  <!-- 侧边菜单 -->
  <div class="col-auto">
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link" href="#">菜单选项1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">菜单选项2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">多语言长文本菜单</a></li>
    </ul>
  </div>
  <!-- 右侧内容区 -->
  <div class="col" style="min-width: 0;">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
            <th>列标题4</th>
            <th>列标题5</th>
            <th>列标题6</th>
            <th>列标题7</th>
            <th>列标题8</th>
            <th>列标题9</th>
            <th>列标题10</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>表格数据1</td>
            <td>表格数据2</td>
            <td>表格数据3</td>
            <td>表格数据4</td>
            <td>表格数据5</td>
            <td>表格数据6</td>
            <td>表格数据7</td>
            <td>表格数据8</td>
            <td>表格数据9</td>
            <td>表格数据10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

自定义CSS类写法

如果需要复用这个样式，可以定义一个自定义类：

.col-shrinkable {
  min-width: 0;
}

然后应用到右侧列：

<div class="col col-shrinkable">
  <!-- 表格容器 -->
</div>

效果说明 #

添加min-width: 0后，右侧列会优先占用父行的剩余空间，当表格宽度超过列宽时，.table-responsive会自动生成横向滚动条，同时侧边栏与内容区始终保持在同一行，不会因为表格过宽而换行。

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