如何删除特定的div divut空间 – bootstrap
默认的Bootstrap网格系统使用12列，每个跨度有30像素的排水沟如下。 排水沟是列之间的白色空间。 沟宽度似乎在20px – 30px之间。 我们假设这是30px。
我想删除特定div的排水沟空间，这样就不会有排水沟空间。 每个跨度将彼此相邻而没有排水沟。
问题是，如果我删除边距30px（阴沟）它离开360px（12 * 30）在行的末尾。
鉴于我想只删除特定的div divutter空间。 我们假设它是在main_content div中的div。
div#main_content div{ /* no gutter for the divs in main_content */ }
我怎样才能删除一个特定的水槽，而不会松动靴子的响应，而不是在行的末尾留下空间？
对于Bootstrap 3.0或更高版本， 请参阅此答案
我们只在这里查看class .span1 （12宽网格上的一列），但是可以通过从以下位置删除左边距来实现所需的function：
.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive
然后改变.row-fluid .span1 1的宽度等于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)
对于Bootstrap 3来说 ，它更容易。 Bootstrap 3现在使用填充而不是边距来创build“阴沟”。
.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包含一个可应用于整row的no-gutters类：
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> ）sets padding-left:0; 在列上。
更新： TWBS 3的链接getbootstrap.com/customize/#grid-system
Twitter Bootstrap提供了一个自定义的表单来下载全部或部分自定义configuration的组件。
你可以使用这个表格来下载一个没有水槽的网格，它会响应 – 你只需要网格组件和响应宽度的响应。
演示（jsfiddle） 
如果你对LESS有一点了解，那么你可以将生成的CSS包含在你select的select器中。
/* LESS */ .some-thing { /* The custom grid ... */ }
如果没有，你应该在每个规则的前面添加这个select器（不是那么多）。
如果您知道LESS并使用LESS脚本来pipe理您的样式，则可能需要直接使用Grid mixins v2（github）
网格mixins v3（github）
总宽度是用元素的宽度加上边距空间的宽度来计算的。 如果你想删除边距空间，那很好，但是为了避免你提到的那个空隙，你还需要增加列的宽度。
在这种情况下，您需要通过删除的边距空间来增加单个列的宽度，这将是30px。
所以，假设您的列宽度通常为50PX，并带有30PX的余量空间。 删除边距空间，并使宽度80PX。
示例4 span3的列。 对于其他跨度宽度，使用新的宽度=旧宽度+天沟尺寸。 使用媒体查询使其响应。
CSS：
<style type="text/css"> @media (min-width: 1200px) { .nogutter .span3 { margin-left: 0px; width:300px; } } @media (min-width: 980px) and (max-width: 1199px) { .nogutter .span3 { margin-left: 0px; width:240px; } } @media (min-width: 768px) and (max-width: 979px) { .nogutter .span3 { margin-left: 0px; width:186px; } } </style>
HTML：
<div class="container"> <div class="row"> <div class="span3" style="background-color:red;">...</div> <div class="span3" style="background-color:red;">...</div> <div class="span3" style="background-color:red;">...</div> <div class="span3" style="background-color:red;">...</div> </div> <br> <div class="row nogutter"> <div class="span3" style="background-color:red;">...</div> <div class="span3" style="background-color:red;">...</div> <div class="span3" style="background-color:red;">...</div> <div class="span3" style="background-color:red;">...</div> </div> </div>
更新 ：或分割span12 div在100 / numberofcolumns％宽度部分左侧浮动：
<div class="row"> <div class="span12"> <div style="background-color:green;width:25%;float:left;">...</div> <div style="background-color:yellow;width:25%;float:left;">...</div> <div style="background-color:red;width:25%;float:left;">...</div> <div style="background-color:blue;width:25%;float:left;">...</div> </div> </div>
有关这两种解决scheme，请参阅： http ： //bootply.com/61557
有趣…
在Twitter Bootstrap的默认网格中删除阴沟，即940px宽。 而且默认的网格有一个940px宽的容器，并且在其样式表中有bootstrap-responsive.css。
如果我的问题得到了解决，我就是这么做的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Stackoverflow Question</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link rel="stylesheet" href="assets/css/bootstrap.css"> <link rel="stylesheet" href="assets/css/bootstrap-responsive.css"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <![endif]--> <style type="text/css"> #main_content [class*="span"] { margin-left: 0; width: 25%; } @media (min-width: 768px) and (max-width: 979px) { #main_content [class*="span"] { margin-left: 0; width: 25%; } } @media (max-width: 767px) { #main_content [class*="span"] { margin-left: 0; width: 100%; } } @media (max-width: 480px) { #main_content [class*="span"] { margin-left: 0; width: 100%; } } <!-- For Visual Aid Only --> .bg1 { background-color: #C2C2C2; } .bg2 { background-color: #D2D2D2; } </style> <body> <div id="wrap"> <div class="container"> <div class="row-fluid"> <div class="span1 text-center bg1">01</div> <div class="span1 text-center bg2">02</div> <div class="span1 text-center bg1">03</div> <div class="span1 text-center bg2">04</div> <div class="span1 text-center bg1">05</div> <div class="span1 text-center bg2">06</div> <div class="span1 text-center bg1">07</div> <div class="span1 text-center bg2">08</div> <div class="span1 text-center bg1">09</div> <div class="span1 text-center bg2">10</div> <div class="span1 text-center bg1">11</div> <div class="span1 text-center bg2">12</div> </div> <div id="main_content"> <div class="row-fluid"> <div class="span3 text-center bg1">1</div> <div class="span3 text-center bg2">2</div> <div class="span3 text-center bg1">3</div> <div class="span3 text-center bg2">4</div> </div> </div> </div><!--/container--> </div> </body> </html>
结果是..
没有排水沟的4格跨度将保持跨越小平板景观（800×600）。 任何小于这个尺寸的东西都会折叠4个div，并且会垂直堆叠。 当然，你将不得不调整它以适应你的需求。
简单的方法来删除填充和边距是简单的CSS。
<div class="header" style="margin:0px;padding:0px;"> ..... ..... ..... </div>
好的如果你想改变一行内的排水沟，但想要那些（第一个和最后一个）内部的div与围绕.no-gutter行的网格alignment，你可以复制粘贴合并大多数答案到以下片段：
.row.no-gutter [class*='col-']:first-child:not(:only-child) { padding-right: 0; } .row.no-gutter [class*='col-']:last-child:not(:only-child) { padding-left: 0; } .row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) { padding-right: 0; padding-left: 0; }
如果你喜欢有一个较小的排水沟，而不是完全没有，只要改变0为你喜欢的…（例如：5px得到10px的排水沟）。
要添加到上面的Skelly的Bootstrap 3 no-gutter答案（ https://stackoverflow.com/a/21282059/662883 ）
添加以下内容以防止仅包含一列的行上的排水沟（使用列换行时很有用： http : //getbootstrap.com/css/#grid-example-wrapping ）：
.row.no-gutter [class*='col-']:only-child, .row.no-gutter [class*='col-']:only-child { padding-right: 0; padding-left: 0; }
