我正在使用 Bootstrap 5 为音乐播放器创建一个 HTML 布局。播放器的一个部分我想在其中显示有关歌曲中当前正在播放的模式的信息。
这是我要显示的内容。本质上有两列。左边是订单列表栏，我希望订单列表中的所有图案编号都垂直显示。这个很窄。
右侧是花样数据部分，显示当前正在播放的花样数据。这有时可能非常宽。
我想要的是两者并排显示。但是，当某个模式有大量数据或视口较小时，第二个 div 会出现在第一个 div 的下方。我希望两个 div 始终相邻出现，第一个 div 仅占据所需的宽度，第二个 div 占据其余宽度。
这是一个片段，这样你就可以明白我的意思。如果缩小浏览器窗口，您会看到模式数据列落在订单列表列下方，但我希望它们保持彼此相邻。
td.fixed-col {
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
td.row-num-col {
width: 3em;
}
td.tracker-col {
width: 4em;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/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">
<!-- An unrelated container that shows the playback controls -->
</div>
<div class="container my-2 mx-1 py-2 bg-light rounded">
<div class="row">
<!-- This should be on the left and should be narrow -->
<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>
<!-- This should be on the right and take up the remaining horizontal space -->
<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>我需要更改什么才能使
#pattern-data#order-list您只需在这一行中添加
flex-nowrap<div class="row flex-nowrap">
<!-- This should be on the left and should be narrow -->