删除仅特定div的装订线空间 [英] Remove gutter space for a specific div only
问题描述
默认的Bootstrap网格系统使用12列,每个跨度具有30px
装订线,如下所示. 装订线是列之间的空白.装订线宽度似乎在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
的装订线空间,以便该行中没有装订线空间.每个跨度都将彼此相邻,而不会发生排水沟.
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
(装订线),它将在行的末尾留下360px
(12 * 30px
).
The problem is if I remove the margin 30px
(gutter) it leaves 360px
(12 * 30px
) at the end of the row.
鉴于我只想删除特定div
的装订线空间.假设它是用于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
s which are in the main_content
div
.
div#main_content div{
/*
no gutter for the divs in main_content
*/
}
如何删除特定div
的装订线,而又不会失去Bootstrap的响应能力,又不会在行的末尾留出空间?
How can I remove the gutter for a specific div
without loosing Bootstrap responsiveness and not leaving space at the end of the row?
推荐答案
对于Bootstrap 3.0或更高版本,查看此答案
For Bootstrap 3.0 or higher, see this answer
我们在这里仅查看类.span1
(12宽网格上的一列),但是您可以通过删除以下项的左边距来实现所需的目标:
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 }
*编辑(使用默认网格保持)
如果需要默认的网格系统,则默认为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)
这篇关于删除仅特定div的装订线空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!