为什么当Bootstrap中没有行时,列不会浮动?

时间:2018-06-11 10:06:23

标签: css bootstrap-4 css-float

我试过阅读:

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>

2 个答案:

答案 0 :(得分: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链接。

答案 1 :(得分:0)

您必须使用warp div添加row class 因为row设置flex然后它可以在同一行中 我重新学习了解flexhttps://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>