当 Bootstrap 中没有行时，为什么列不浮动？

Question

我试过阅读：

and http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

但是，其中 none 个解释了为什么我在以下代码中的列不向左浮动：

<div class = "container">
    <div class = "col-2">
        1
    </div>
    <div class = "col-2">
        2
    </div>
</div>

Answer 1

因为row具有以下弹性属性。在 bootstrap 4 中，网格通过使用 flex 容器工作。因为没有 row div 就不会有 flex-container，里面的子元素不会按需要浮动。（尽管我必须提一下，在创建 bootstrap4 的网格时没有实际使用 float 属性）

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

阅读 this link 了解 bootstrap 网格的工作原理。

Answer 2

您必须添加 warp div 和 row class
因为 row 设置它 flex 然后它可以在同一行
我建议您了解 flex:https://www.w3schools.com/Css/css3_flexbox.asp

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class = "container">
<div class = "row">
    <div class = "col-sm-2">
        1
    </div>
    <div class = "col-sm-2">
        2
    </div>
</div>
</div>

当 Bootstrap 中没有行时，为什么列不浮动？

Why don't columns float when there are no rows in Bootstrap?

css

css-float

bootstrap-4