调整浏览器大小时向左滑动的单个 div 行

Question

我正在构建一个 Set Generator 应用程序，供音乐家用来查看乐队将在演出中播放的歌曲，按照它们的播放顺序。每组都包含歌曲名称、歌曲调和特定信息，具体取决于谁登录了该应用程序。我正在使用 Bootstrap for CSS 以及本地样式表 (style.css)。我也在努力使用 Flexbox 框架。我正在用 VS Code 开发它。

在主用户页面上，我有一个页面标题，几个控件（日期和集#），设置后，它们将在该集中的每首歌曲的“标题”下方显示一个行项目。我的问题是列表标题。

这是有问题的 div。

<div class="flex-container row m-2">
    <div style=>
        <div class="table-hdr col-8">Title</div>
    <div class="table-hdr">Key</div>
    <div class="table-hdr">Fantom</div>
    <div class="table-hdr">DI</div>
    </div>
</div>


Image 1.

Which causes the line to look like the first image above.  However, when I stretch the window, whether inside of VS Code or in a browser window, the second image.

Image 2.

我已经成功地让这个标题上方的其他元素保持原样并且是自适应的。然而，这一行有 4 个单独的 div，每个标题元素（标题、键、Fantom 和 Di）一个，它们使用 table-hdr 类和一个 col-8 类设置样式。这导致他们连续待在一起。问题是调整浏览器大小时行向左移动。

我已经尝试了一些引导程序样式，例如 justify-content 变体、表格，应有尽有。快速无处可去。我正在使用所有标准媒体查询：

/* Media Queries */
/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
}

  /* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
        width: 50%;
    }
}

  /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

我也尝试过 display:inline-block, position: absolute, position: relative 等。