列显示为 Bootstrap 4 中的行 [重复]答案

【问题标题】：Columns shows like rows in Bootstrap 4 [duplicate]列显示为 Bootstrap 4 中的行 [重复]
【发布时间】：2018-02-28 19:11:04
【问题描述】：

我想像使用 Bootstrap 3 一样创建三列，但在这里我没有得到三列，而是得到了三行。

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0" data-semver="4.0.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0" data-semver="4.0.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script data-require="popper.js@1.12.9" data-semver="1.12.9" src="https://unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class = "container-fluid">
      <div class = "row">
        <div class = "col-md-4">Left</div>
        <div class = "col-md-4">Center</div>
        <div class = "col-md-4">Right</div>
      </div>
    </div>
  </body>

</html>

Plunker：https://plnkr.co/edit/6gRm3dsYxBjCdKR5V7Dy?p=info

我做错了什么？

编辑我

这是我的屏幕宽度：

如您所见，我没有得到列，而是得到了行。我的屏幕宽度大于 1200px。

我正在使用 Angular 5。

已修复

这是我的错。我的 Angular 代码中没有包含 Bootstrap CSS 文件。

【问题讨论】：

对我来说很好。您是否获得了特定屏幕宽度的行？
这张图片看起来不像你的 plnkr
我已经签入 plunker 工作正常，但与 Angular 5 相同的代码对我不起作用:(
您需要显示重现问题的代码。您显示的代码没有。

标签： bootstrap-4 multiple-columns

【解决方案1】：

实际上，您确实得到了三列，但仅适用于尺寸为md 及更大的屏幕。调整输出大小（使其更大）以查看列。

要在小于md 的屏幕上获得三列，您需要告诉引导程序您想要在较小的屏幕上显示 3 列。在 bootstrap v4 中，就是：

    <div class = "col-4">Left</div>
    <div class = "col-4">Center</div>
    <div class = "col-4">Right</div>

【讨论】：

【解决方案2】：

具体来说，如果您的屏幕宽度小于 768 像素，列将自动堆叠在一起，而不是您想要的方式。

【讨论】：