仅删除特定 div 的装订线空间 [英] Remove gutter space for a specific div only

问题描述

默认的 Bootstrap 网格系统使用 12 列，每个跨度具有 30px 间距，如下所示.装订线是列之间的空白区域.装订线宽度似乎在 20px - 30px 之间.我们假设这里是 30px.

我想删除特定 div 的装订线空间，以便行中没有装订线空间.每个跨度将彼此相邻，没有排水沟.

问题是如果我删除边距 30px (gutter) 它会在行的末尾留下 360px (12 * 30px).

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

div#main_content div{/*main_content 中的 div 没有排水沟*/}

如何删除特定 div 的装订线，而不会失去 Bootstrap 响应能力，并且不会在行尾留出空间?

解决方案

对于 Bootstrap 3.0 或更高版本，查看此答案

我们在这里只查看 .span1 类(12 宽网格上的一列)，但是您可以通过从以下位置移除左边距来实现您想要的:

.row-fluid [class*="span"] { margin:0 }//引导响应的第 571 行

然后将 .row-fluid .span1 的宽度更改为 100% 除以 12 列 (8.3333%).

.row-fluid .span1 { width: 8.33334% }//引导响应的第 632 行

您可能希望通过添加一个额外的类来实现这一点，该类允许您保持基本网格系统不变:

.row-fluid [class*="NoGutter"] { margin-left:0 }.row-fluid .span1NoGutter { 宽度:8.33334% }<div class="row-fluid show-grid"><div class="span1NoGutter">1</div>

您也可以对所有其他列重复此模式:

.row-fluid .span2NoGutter { width:16.66667%;margin-left:0 }//100%/6 列.row-fluid .span4NoGutter { 宽度:25%;margin-left:0 }//100%/4 列.row-fluid .span3NoGutter { 宽度:33.33333%;margin-left:0 }//100%/3 列或者.row-fluid .span4NoGutter { 宽度:25% }.row-fluid [class*="NoGutter"] { margin-left:0 }

* EDIT(坚持使用默认网格)
如果需要默认网格系统，则默认宽度为 940px(即 .container 和 .span12 类)；因此，简单来说，您需要将 940 除以 12.这相当于 12 个 78.33333px 宽的容器.

所以 bootstrap.css 的第 339 行可以这样

.span1 { 宽度:78.33333px;左边距:0 }或者.span1 { 宽度:8.33334%；左边距:0 }//这应该以 78.333396px (78.333396 x 12 = 940.000752) 呈现

The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px. Let's assume it's 30px here.

I want to remove the gutter space for a specific div, so that there will be no gutter space in the row. Each span will be next to each other with no gutter.

The problem is if I remove the margin 30px (gutter) it leaves 360px (12 * 30px) at the end of the row.

Given that I want to remove gutter space for a specific div only. Let's assume that it's for divs which are in the main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

How can I remove the gutter for a specific div without loosing Bootstrap responsiveness and not leaving space at the end of the row?

解决方案

For Bootstrap 3.0 or higher, see this answer

We're only looking at class .span1 here (one column on a 12 wide grid), but you can achieve what you want by removing the left margin from:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

Then changing .row-fluid .span1's width to equal to 100% divided by 12 columns (8.3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

You may want to do this by adding an additional class that would allow you to leave the base grid system intact:

.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>

You could repeat this pattern for all other columns, as well:

.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 }

* EDIT (insisting on using the default grid)
If the default grid system is a requirement, it defaults to a width of 940px (the .container and .span12 classes, that is); thus, in simplest terms, you'd want to divide 940 by 12. That equates to 12 containers 78.33333px wide.

So line 339 of bootstrap.css could be edited like so:

.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)

这篇关于仅删除特定 div 的装订线空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！