在站点上使用多个引导装订线宽度

Question

我正在使用 bootstrap 3 网格系统，并且我的设计在页面的不同部分使用多个网格间距宽度。

查看示例主题，他们似乎都在整个页面上使用了一个装订线宽度

http://wrapbootstrap.com/preview/WB06F57D4

http://wrapbootstrap.com/preview/WB0025522

例如，bootstrap 的默认下载为您提供以下 css：

@media (min-width: 1200px)
.container {
width: 1140px;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.......col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

所以这为您提供了每列之间的默认 30px 和 65px 的最大列宽（宽度填充其 95pc）

如果我不想要排水沟，我会得到以下内容

@media (min-width: 1200px)
.container {
width: 1140px;
}

.row {
margin-left: 0px;
margin-right: 0px;
}

....col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 0px;
padding-right: 0px;
}

因此这为您提供了每列之间的默认 30px 和 95px 的最大列宽。

为不同部分组合具有多个装订线宽度的页面的标准方法是什么？这个可以吗？

Answer 1

是的，只需为页面分配一个新类并根据需要调整列填充。

body.alt-gutter[class^='col-'], body.alt-gutter[class*=' col-'] {
  padding-left: 5px; // or whatever you need
  padding-right: 5px;
}