为什么引导程序的容器类有填充,而行类有负边距来补偿填充 [英] why bootstrap's container class has padding while row class has negative margins to compensate the padding
问题描述
Bootstrap 的 container
类在两边都有填充:
.container-fixed(@gutter: @grid-gutter-width) {padding-left: (@gutter/2);填充右:(@gutter/2);}
虽然 row
类有负 margins
:
.make-row(@gutter: @grid-gutter-width) {左边距:(@gutter/-2);右边距:(@gutter/-2);}
所以当我们这样放置 html 时:
<div class="row">...
row
类中的内容占用容器从左到右的所有空间,使用负 margins
偏移 padding
.我想知道为什么使用这种方法?我还看到它用于导航栏,特别是 navbar-right
类具有负边距.
将列放在 .row 中会偏移填充,这样您就可以嵌套列.嵌套列对于控制某些(大多数)布局很重要.由于列内置了填充,如果您嵌套它们而不对其进行偏移,则填充会增加并且列内容不会像您想要的那样排列.看这个例子:
http://www.bootply.com/ZZ4ML0yjSG
<h3>没有 .row 缓冲区</h3><div class="col-md-12 bg-warning">第 1 列<div class="col-md-12 bg-danger"><div class="col-md-6 bg-info">没有 .row 缓冲区的嵌套列 1</div><div class="col-md-6 bg-success">没有 .row 缓冲区的嵌套第 2 列</div>
<小时><div class="容器"><h3>使用 .row 缓冲区</h3><div class="row"><div class="col-md-12 bg-warning">第 1 列<div class="row"><div class="col-md-12 bg-danger"><div class="row"><div class="col-md-6 bg-info">嵌套第 1 列与 .row 缓冲区</div><div class="col-md-6 bg-success">嵌套第 2 列与 .row 缓冲区</div>