列显示Bootstrap 4中的行

时间：2018-02-27 21:37:43

标签： bootstrap-4 multiple-columns

我想创建三个列，就像我使用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

我做错了什么？

编辑我

以下是我的屏幕：

enter image description here

正如你所看到的，我没有列，我得到了行。我的屏幕宽度大于1200px。

我正在使用Angular 5.

固定

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

2 个答案:

答案 0 :(得分：0)

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

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

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

答案 1 :(得分：0)

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

相关问题
最新问题