仅删除特定div的装订线空间

Question

默认的Bootstrap网格系统使用12列,每个跨度具有30px如下所示的装订线.排水沟是列之间的空白区域.排水沟宽度似乎介于20px- 30px.我们假设它在30px这里.

我想删除特定的装订线空间div,以便排中没有排水沟空间.每个跨度将彼此相邻,没有排水沟.

问题是如果我删除30px它在行尾留下的边距(沟槽)360px(12*30px).

鉴于我只想删除特定的天沟空间div.让我们假设它是在divs中的s main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

如何在div不失去Bootstrap响应性且不在行尾留空间的情况下删除特定的装订线？

Answer 1

更新2018年

对于Bootstrap 3,它更容易.Bootstrap 3现在使用填充而不是边距来创建"装订线".

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

然后只需添加no-gutter到要删除间距的任何行:

  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>

演示:http://bootply.com/107708

Bootstrap 4(无需额外的CSS)

Bootstrap 4包含一个no-gutters可应用于整个类的类row:

http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

还有新的间距工具可以控制填充/边距.因此,这可以被用来改变单个列填充(沟槽)(即:<div class="col-3 pl-0"></div>)设置padding-left:0;在柱,或使用px-0以除去两个左右填充(x轴).

Answer 2

对于Bootstrap 3.0或更高版本,请参阅此答案

我们只看.span1这里的课程(12格宽的网格上的一列),但你可以通过删除左边距来实现你想要的:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

然后将.row-fluid .span1宽度更改为等于100%除以12列(8.3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

您可能希望通过添加一个允许您保持基本网格系统完整的其他类来执行此操作:

.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }

<div class="row-fluid show-grid">
    <div class="span1NoGutter">1</div>
</div>

您也可以为所有其他列重复此模式:

.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }

*编辑(坚持使用默认网格)
如果默认网格系统是一个要求,它默认宽度为940px(.container和.span12类,即); 因此,简单来说,你想要将940除以12.这相当于12个容器78.33333px宽.

因此bootstrap.css的第339行可以这样编辑:

.span1 { width:78.33333px; margin-left:0 }
  or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)

Answer 3

更新:TWBS 3的链接getbootstrap.com/customize/#grid-system

Twitter Bootstrap提供自定义表单,可通过自定义配置下载所有或部分组件.

您可以使用此表单下载没有排水沟的网格,它将响应 - 您只需要网格组件和响应宽度的响应.

演示(jsfiddle)

如果您对LESS有所了解,那么您可以将生成的CSS包含在您选择的选择器中.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

如果没有,你应该在每个规则的前面添加这个选择器(不管怎么说).

如果你知道LESS并使用LESS脚本来管理你的样式,你可能想直接使用Grid mixins v2(github)

Grid mixins v3(github)