css - 删除仅特定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的响应能力，又不会在行的末尾留出空间？

最佳答案

对于Bootstrap 3.0或更高版本，see this answer

我们只在这里查看类.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)

关于css - 删除仅特定div的装订线空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54330622/