Bootstrap 5两列无法始终并排显示的解决方案求助

问题描述 #

我在用Bootstrap 5制作音乐播放器的HTML布局，需要展示当前播放乐曲的pattern信息：左侧是窄宽度的垂直序号列（#order-list），右侧是可能较宽的pattern数据列（#pattern-data）。期望两列始终并排显示，左侧仅占用所需宽度，右侧占据剩余空间，但当前在小视口或表格列较多时，右侧列会换行至左侧列下方。

现有代码片段 #

CSS

td.fixed-col {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

td.row-num-col {
    width: 3em;
}

td.tracker-col {
    width: 4em;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<body>
    <div class="container my-2 mx-1 py-2 bg-light rounded" id="info">
        <!-- 播放控制容器 -->
    </div>
    <div class="container my-2 mx-1 py-2 bg-light rounded">
        <div class="row">
            <!-- 左侧窄序号列 --> 
            <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 overflow-x-auto" style="overflow-x: auto; 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>
                        <tr id="pattern_1_row_0" class="">
                          <td class="row-num-col fixed-col">0</td>
                          <td class="tracker-col fixed-col">F-5</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">F-5</td>
                          <td class="tracker-col fixed-col">---</td>
                        </tr>
                        <tr id="pattern_1_row_1" class="">
                          <td class="row-num-col fixed-col">1</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                        </tr>
                        <tr id="pattern_1_row_2" class="">
                          <td class="row-num-col fixed-col">2</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">F-5</td>
                        </tr>
                        <tr id="pattern_1_row_3" class="">
                          <td class="row-num-col fixed-col">3</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                          <td class="tracker-col fixed-col">---</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

解决方案 #

要让两列始终并排，只需修改Bootstrap的Flex布局属性，强制行不换行，并确保右侧内容能正确处理溢出：

修改步骤 #

1. 给包裹两列的.row添加flex-nowrap类，强制Flex容器不换行，避免空间不足时列自动换行。
2. 给右侧的.col（#pattern-data的父容器）添加overflow-hidden，确保内部的横向滚动容器能正常工作，不会撑破布局。
3. 可选：给左侧的.col-auto添加flex-shrink-0，防止序号列被压缩（.col-auto默认已不会被压缩，此步为增强稳定性）。

修改后的核心代码片段 #

HTML部分（仅修改row和列的类）

<div class="container my-2 mx-1 py-2 bg-light rounded">
    <div class="row flex-nowrap">
        <!-- 左侧窄序号列 --> 
        <div class="col-auto flex-shrink-0" id="order-list">
            <!-- 内部内容不变 -->
        </div>
        <!-- 右侧占剩余空间的数据列 -->
        <div class="col overflow-hidden" id="pattern-data">
            <!-- 内部内容不变 -->
        </div>
    </div>
</div>

原理说明 #

• flex-nowrap：覆盖Bootstrap .row 默认的 flex-wrap: wrap 属性，强制所有子列在同一行显示，不会因空间不足换行。
• overflow-hidden：确保右侧列的容器不会被内部过宽的表格撑开，让内部的overflow-x-auto生效，超出部分显示横向滚动条。
• flex-shrink-0：固定左侧序号列的宽度，防止在极端窄视口下被压缩变形。

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