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

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;
}