猿问

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

默认的Bootstrap网格系统使用12列,每个跨度具有30px以下装订线。装订线是列之间的空白。装订线宽度似乎介于20px- 之间30px。假设它在30px这里。


我想删除特定的装订线空间div,以便该行中没有装订线空间。每个跨度将彼此相邻,且不存在排水沟。


问题是,如果我删除30px留在行末的360px(12 * 30px)边距(装订线)。


鉴于我只想删除特定的装订线空间div。假设它是用于div中的main_content div。


div#main_content div{

  /*

 no gutter for the divs in main_content

 */

}

如何在div不失去Bootstrap响应能力且在行尾不留空间的情况下,为特定的对象删除装订线?


UYOU
浏览 507回答 3
3回答

30秒到达战场

对于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">&nbsp; &nbsp; <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 color.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 }&nbsp; or.span1 { width:8.33334%; margin-left:0 }// this should render at 78.333396px (78.333396 x 12 = 940.000752)
随时随地看视频慕课网APP
我要回答