如何删除特定的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包含一个可应用于整rowno-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; }