本文详解如何在 bootstrap 5 中强制两列（窄宽不均）始终水平并排显示，即使视口狭窄或内容超宽，关键在于禁用 flex 换行并启用横向滚动。
本文详解如何在 bootstrap 5 中强制两列（窄宽不均）始终水平并排显示，即使视口狭窄或内容超宽，关键在于禁用 flex 换行并启用横向滚动。
在 Bootstrap 5 的栅格系统中，.row 默认使用 display: flex 并启用了 flex-wrap: wrap，这意味着当容器宽度不足以容纳所有子列时，列会自动折行——这正是你遇到的问题：#order-list（.col-auto）和 #pattern-data（.col）在小屏或数据量大时被迫垂直堆叠。
要打破这一行为，需显式禁用换行，并为父容器添加横向滚动能力。核心修改仅需两步：
-
在
.row上添加.flex-nowrap：覆盖默认的flex-wrap: wrap，强制子元素始终处于同一行； -
为
.row添加overflow-x: auto样式：当内容总宽度超出视口时，显示水平滚动条，而非破坏布局。
同时，需确保右侧内容区域支持横向滚动与不换行：
- 移除
#other-panel内联样式中的重复overflow-x: auto（已在父级统一控制）； - 保留
white-space: nowrap防止表格单元格内文本折行，配合td.fixed-col的display: inline-block和overflow: hidden实现紧凑对齐。
以下是推荐的最小化修改方案（仅需改动 .row 容器）：
<div class="row flex-nowrap" style="overflow-x: auto;">
<div class="col-auto" id="order-list">
<!-- 左侧窄列：自动收缩至内容宽度 -->
<div id="order_list" class="column text-warning bg-dark rounded p-3 font-monospace text-center">
<div id="order-0">0</div>
<div id="order-1">1</div>
<div id="order-2">2</div>
<div id="order-3">3</div>
<div id="order-4">4</div>
</div>
</div>
<div class="col" id="pattern-data">
<!-- 右侧宽列：占据剩余空间，内容可横向滚动 -->
<div id="other-panel" class="column text-warning bg-dark rounded p-3 font-monospace" style="white-space: nowrap;">
<table id="patternView">
<tr id="pattern_1_header">
<td class="row-num-col fixed-col">Row</td>
<td class="tracker-col fixed-col">Ch 0</td>
<td class="tracker-col fixed-col">Ch 1</td>
<td class="tracker-col fixed-col">Ch 2</td>
<td class="tracker-col fixed-col">Ch 3</td>
</tr>
<!-- 其他行保持不变 -->
</table>
</div>
</div>
</div>
✅ 注意事项：
- 不要对
.col-auto或.col单独设置min-width或flex-basis，否则可能干扰响应式计算； - 若需在移动端提供更好体验，可结合
@media (max-width: 576px)添加padding: 0或微调字体大小，但核心布局逻辑无需降级； - 避免在
.row上同时使用justify-content-*类与overflow-x: auto，以防滚动条遮挡内容；如需居中对齐，请改用margin: 0 auto包裹整个.row。
此方案完全兼容 Bootstrap 5 的 CSS 架构，无需引入额外 JS 或自定义 Flex 属性，简洁、可靠且语义清晰。
