如何删除gutter空间的特定div只有 - 引导

问题描述

默认Bootstrap网格系统使用12列，每个跨度具有30px gutter，如下所示。 gutters是列之间的空格。 gutter宽度似乎在20px到30px之间。让我们假设这里是30px。

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.

我想删除特定div的gutter空间，以便在行中没有gutter空间。

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.

问题是如果我删除边距30px（gutter），它离开360px（12 * 30）的行。

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

由于我只想删除特定div的gutter空间。让我们假设它是在 main_content div中的div。

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

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

如何删除特定div的gutter，而不会失去bootsrap响应性，并且不会在行尾留下空格？

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

推荐答案

对于Bootstrap 3.0或更高版本，

For Bootstrap 3.0 or higher, see this answer

我们只在这里查看类 .span1 但您可以通过从以下位置删除左边距来实现所需的：

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

然后更改。 row-fluid .span1 的宽度等于100％除以12列（8.3333％）。

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（坚持使用默认网格） / strong>

如果默认网格系统是必需的，它默认宽度为940px（.container和.span12类）。因此，在最简单的情况下，您需要将940除以12.这相当于12个容器78.33333px宽。

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

因此，可以编辑bootstrap.css的第339行像这样：

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)

这篇关于如何删除gutter空间的特定div只有 - 引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！