bootstrap简介中的一点问题

发布于 2022-09-04 20:16:16 字数 212 浏览 8 评论 0

刚才看到这句:
通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
不是很能理解是怎么个说法,有没有通俗一点的说法或者例子??

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦行七里 2022-09-11 20:16:16

row的负margin值主要是为了消除最左边和最右边的column元素和container的边距

可以看下原文(http://getbootstrap.com/css/#...

Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.

我们知道bootstrap中栅格的使用顺序是 container -> row -> col

他们的css定义:

.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}

.col-*-* {
    padding-right: 10px;
    padding-left: 10px;
}

如果没有负margin的抵消,前后就会有间隙,你可以自己把负margin去掉对比下,看下区别

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文