Bootstrap 列在不应该时垂直堆叠答案

【问题标题】：Bootstrap columns vertically stacking when they shouldn't beBootstrap 列在不应该时垂直堆叠
【发布时间】：2021-06-28 21:24:55
【问题描述】：

我目前正在尝试学习 Bootstrap 网格系统。我有以下 html 代码，它试图简单地用三列创建一行：

<body>
    <div class="container">
      <div class="row">
        <div class="col-4">
          left column 
        </div>
        <div class="col-4">
          middle column
        </div>
        <div class="col-4">
          right column
        </div>
      </div>
    </div>

我相信这应该只创建水平对齐的三列（填充同一行），但是，在 Chrome 中，它们垂直堆叠。有人知道为什么吗？

【问题讨论】：

能否检查一下页面中是否导入了引导库？
此代码在正确包含引导程序的情况下工作正常！

标签： html css bootstrap-4

【解决方案1】：

也许是一个愚蠢的回复，但您是否检查过您的 css 文件是否正确通过？

行自动伸缩，col-4 对 3 宽是正确的。

我不禁认为 css 文件已经到位。

在行元素上打开检查元素，你应该会看到类似的 css：

显示：弹性；

【讨论】：

我将我的 css 文件中的 display 属性更改为 display: flex for div 元素。它的改进在于所有列都在同一行上，但是，现在所有列都被挤压到屏幕的左侧，尽可能地不重叠。可能有其他问题吗？
嘿@CharlieRettig，看起来你的问题是你没有通过引导 css 或 scss。您将在“justify-content-between”行中添加一个类，这会将它们隔开。或者你可以使用“justify-content-around”。如果引导 css 正确链接到您的站点，例如引导程序作为其 cdn 链接的内容，则添加该类应该可以工作。您必须在 display:flex 上添加的事实；你自己让我认为它不是。