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

Question

这个问题在这里已有答案：

Bootstrap 4 - no column wrapping 2回答
How to set bootstrap col for small display sizes? [duplicate] 2回答

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

<!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="4.0.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="4.0.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script data-require="[email protected]" data-semver="1.12.9" src="https://unpkg.com/[email protected]/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。

固定

这都怪我。我的角度代码中没有包含Bootstrap CSS文件。

Answer 1

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

要在小于md的屏幕上获得三列，您需要告诉bootstrap在较小的屏幕上需要3列。在bootstrap v4中，那是：

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

Answer 2

具体来说，如果您的屏幕宽度小于768px，则列将自动堆叠在彼此之上而不是您想要的方式。

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

问题描述投票：0回答：2

编辑我

固定

2个回答

最新问题

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

问题描述 投票：0回答：2

编辑我

固定

2个回答

最新问题

问题描述投票：0回答：2