gpt4 book ai didi

twitter-bootstrap - 为什么 Bootstrap 的容器类有填充,而行类有负边距来补偿填充

转载 作者:行者123 更新时间:2023-12-01 00:58:22 27 4
gpt4 key购买 nike

Bootstrap 的 container类的两侧都有填充物:

.container-fixed(@gutter: @grid-gutter-width) {
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}

row类有负 margins :
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}

因此,当我们这样放置 html 时:
<div class="container">
<div class="row">
...
</div>
</div>
row 中的内容类占用容器从左到右的所有空间,偏移 padding使用否定 margins .我想知道为什么使用这种方法?我还看到它被用于导航栏,特别是 navbar-right类有负边距。

最佳答案

将列放在 .row 中会偏移填充,这样您就可以嵌套列。嵌套列对于控制某些(大多数)布局很重要。由于列具有内置填充,如果您嵌套它们而不偏移它,则填充将成倍增加,并且列内容不会像您想要的那样排列。看这个例子:

http://www.bootply.com/ZZ4ML0yjSG

<div class="container">
<h3>Without .row buffer</h3>
<div class="col-md-12 bg-warning">Column 1
<div class="col-md-12 bg-danger">
<div class="col-md-6 bg-info">Nested column 1 without .row buffer</div>
<div class="col-md-6 bg-success">Nested column 2 without .row buffer</div>
</div>
</div>
</div>
<hr>
<div class="container">
<h3>With .row buffer</h3>
<div class="row">
<div class="col-md-12 bg-warning">Column 1
<div class="row">
<div class="col-md-12 bg-danger">
<div class="row">
<div class="col-md-6 bg-info">Nested column 1 with .row buffer</div>
<div class="col-md-6 bg-success">Nested column 2 with .row buffer</div>
</div>
</div>
</div>
</div>

关于twitter-bootstrap - 为什么 Bootstrap 的容器类有填充,而行类有负边距来补偿填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25723220/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com