我试过阅读:
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>
答案 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
然后它可以在同一行中
我重新学习了解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>