container
有个15px
的padding
,而我们设定的每个col
也都有15px的padding
,如果两者直接配合,那么就会产生30px的间距,导致内容和浏览器边框的距离较大,所以用row
将所有的col
包裹,row
会有一个-15px
的margin
,可以抵消掉一个container
或col
产生的15px
的padding
值。
另,官网中的关于gutter的条目中的示例:(https://getbootstrap.com/docs/4.3/layout/grid/)
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
在这里把理解记录一下,以防忘记。
意思是col
增加px-lg-5
的类,会使col
的padding
值增大,所以row
需要通过增加mx-lg-n5
的类去减少同样多的padding
去抵消增加的部分,为了防止意外的溢出,container
也需要增加px-lg-5
的类以增加同样多的padding
(这里没明白啥意思,照着做就好了)。上面的类名,px-lg-5
中p
指padding
?,mx-lg-n5
中m
指margin
?,n
应该是negative
。