Question

我试过阅读：

What is the purpose of .row in Bootstrap?和http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

但是，它们都没有解释为什么我的以下代码中的列不会向左浮动：

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

Answer 1

因为row具有以下flex属性。在bootstrap 4中，网格使用flex容器工作。由于没有row div的灵活容器，因此其中的子节点不会按需要浮动。（虽然我必须提到你在创建bootstrap4的网格时没有使用实际的float属性）

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

阅读有关引导网格工作方式的this链接。

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中没有行时，列不会浮动？

2 个答案: