html5 - bootstrap简介中的一点问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - bootstrap简介中的一点问题

滿天的星座 2017-05-16 13:42:55

[HTML讨论组]

1376

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

滿天的星座

全部回复(1)

淡淡烟草味2017-05-16 13:44:55 1楼

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去掉对比下，看下区别

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>