如何删除特定的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; }