Bootstrap 5：第二列表格跳至第一列下方的布局问题求助

我看了你的布局问题，核心原因是表格的超宽内容撑开了右侧列，导致Bootstrap的flex行触发了换行，把表格列挤到了导航下方。要让它和JSON标签的textarea一样保持在右侧，只需要做两个简单的调整：

步骤1：强制行内元素不换行 #

给包含导航和表格的row添加flex-nowrap类，这样两个列会始终保持在同一行，不会因为内容宽度超过而换行：

<div class="row flex-nowrap">
  <!-- 左侧导航col-auto -->
  <!-- 右侧表格col -->
</div>

步骤2：让右侧列支持内部横向滚动 #

给右侧的col添加overflow-x-auto类，这样当表格内容过宽时，滚动条会在右侧列内部生效，而不会撑破整个布局：

<div class="col overflow-x-auto">
  <div class="tab-content">
    <!-- 表格容器和表格 -->
  </div>
</div>

完整修改后的代码片段 #

<div class="container">
 <div class="row flex-nowrap">
  <div class="col-auto">
   <!-- 导航tabs -->
   <div class="d-flex align-items-start"> ..... </div>
  </div>
  <div class="col overflow-x-auto">
   <div class="tab-content">
    <div class="tab-pane active" id="tab-data" role="tabpanel" aria-labelledby="nav-data">
     <div id="div-data-container" class="mb-3 table-responsive">
      <table class="table table-sm table-striped"> ..... </table>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

这样调整后，左侧导航会保持自然宽度，右侧列会占据剩余空间，表格的横向滚动会被限制在右侧列内部，和JSON标签的textarea布局完全一致啦。

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