在 Bootstrap 5 中，当内容过宽或视口缩小时，.col 和 .col-auto 默认会换行堆叠。要确保左右两列（如序号列表与模式数据表）始终并排显示，需禁用弹性容器的自动换行，并启用横向滚动。
在 bootstrap 5 中，当内容过宽或视口缩小时，`.col` 和 `.col-auto` 默认会换行堆叠。要确保左右两列（如序号列表与模式数据表）始终并排显示，需禁用弹性容器的自动换行，并启用横向滚动。
Bootstrap 5 基于 Flexbox 构建，其 .row 类默认使用 flex-wrap: wrap，这意味着当子列总宽度超出容器时，列会自动折行——这正是你遇到“右侧表格掉到下方”的根本原因。
✅ 解决方案：组合使用 flex-nowrap + overflow-x: auto
只需为外层 .row 添加 flex-nowrap 工具类，并设置 overflow-x: auto（支持横向滚动），即可强制两列始终水平排列，无论视口大小或表格列数多少：
<div class="row flex-nowrap" style="overflow-x: auto;">
<div class="col-auto" id="order-list">
<!-- 窄列：自适应内容宽度 -->
<div class="column text-warning bg-dark rounded p-3 font-monospace text-center">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div class="col" id="pattern-data">
<!-- 宽列：占据剩余空间，内部内容可横向滚动 -->
<div class="column text-warning bg-dark rounded p-3 font-monospace" style="white-space: nowrap;">
<table id="patternView">
<tr>
<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>
? 关键要点说明：
-
flex-nowrap：覆盖.row默认的flex-wrap: wrap，强制所有子项单行排列； -
overflow-x: auto：添加在.row上（而非内部.col），使整行容器支持横向滚动，避免内容被裁剪或破坏布局； -
col-auto：左侧窄列根据内容（数字高度）自动收缩，不占多余空间； -
col：右侧列默认占据剩余可用宽度，配合white-space: nowrap和表格固定列宽（如width: 4em），确保单元格不换行； - 移除冗余样式：原代码中
#other-panel的style="overflow-x: auto"可移除，统一由外层.row控制滚动更健壮。
⚠️ 注意事项：
- 避免对
.col或.col-auto单独设min-width或flex-basis，可能干扰flex-nowrap行为； - 若需在极小屏幕（如手机）下仍保持可用性，建议结合
@media为.row添加max-width或限制表格列数； -
white-space: nowrap必须作用于包含表格的直接父容器（如示例中的#other-panel内层 div），否则<td> 内容仍可能折行。<p>此方案完全兼容 Bootstrap 5 的响应式体系，无需自定义 CSS，语义清晰、维护性强，是音乐播放器等专业音序界面中处理宽数据表格的标准实践。</p> </td>
