CSS Twitter Bootstrap：列之间没有边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11282168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: No margin between columns
提问by dev.pus
I want to remove the margins between spans in bootstrap.
我想删除引导程序中跨度之间的边距。
One idea would be to just overwrite the css properties with zero margin and padding. Here is an example: http://jsfiddle.net/kKEpY/3/
一种想法是用零边距和填充覆盖css属性。这是一个例子：http: //jsfiddle.net/kKepY/3/
Without the exception that the left column floats into the the right one it would work but I would prefer a direct bootstrap solution. So does bootstrap provide a property which clears the margins of the columns (span-fluid)?
除非左列浮动到右列，否则它会起作用，但我更喜欢直接引导解决方案。那么 bootstrap 是否提供了清除列边距的属性（跨度流体）？
Regards
问候
回答by Sherbrow
Update: the solution below refers to an old version (< 2.1) : since v2.1 the fluid grid is automatically calculated from the normal grid dimensions - see variables.less on github
更新：下面的解决方案是指旧版本（< 2.1）：自 v2.1 以来，流体网格是根据正常网格尺寸自动计算的 - 请参阅github 上的 variables.less
To obtain the same result, set @gridGutterWidthto 0and set the @gridColumnWidthand @gridColumnsas you see fit.
为了获得相同的结果，设置@gridGutterWidth于0和设置@gridColumnWidth，并@gridColumns为您认为合适的。
There, setting
那里，设置
@fluidGridColumnWidthto8.333333333%and@fluidGridGutterWidthto0%
@fluidGridColumnWidth到8.333333333%和@fluidGridGutterWidth到0%
you can obtain that (jsfiddle).
你可以得到那个 (jsfiddle)。
Warning :the generator seems to put the rules based on your variables, and the default ones (which I removed on the jsfiddle).
警告：生成器似乎根据您的变量和默认变量（我在 jsfiddle 上删除了它们）来放置规则。
回答by Ronen
I had the exact same problem as you do, so here's how I got through this on the latest Bootstrap version 2.3.1:
我和你遇到了完全相同的问题，所以这是我在最新的 Bootstrap 版本 2.3.1 上解决这个问题的方法：
First you need to add a "no-space" class to the parent div with class "row" like this:
首先，您需要使用类“row”向父 div 添加一个“无空格”类，如下所示：
<div class="row-fluid no-space">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
Then you modify your css according to number of elements you want in that row, like this:
然后根据该行中所需的元素数量修改 css，如下所示：
.no-space [class*="span"]{
margin-left: 0 !important;
width: 25% !important; // This is for 4 elements ONLY in the row
}
The math for the width is:
宽度的数学公式是：
100 / number of elements in the row = width.
In my case it was 4 elements so it's:
在我的情况下，它是 4 个元素，所以它是：
100 / 4 = 25%;
If it was 3 elements it would be:
如果是 3 个元素，它将是：
100 / 3 = 33.3333333333%;
If you have multiple cases in a project with this issue, you might want to add a unique id or class to the css rule so it won't affect them all.
如果您的项目中有多个案例存在此问题，您可能希望向 css 规则添加唯一的 id 或类，这样它就不会影响所有案例。
That's it. No need to redownload the bootstrap and to deal with source files
PS: This method works in responsive design as well ;)
就是这样。无需重新下载引导程序和处理源文件
PS：此方法也适用于响应式设计；)
回答by Johnny Zhao
Above answers are really helpful, but my scenario is a little bit different.
上面的答案真的很有帮助，但我的情况有点不同。
I have a span4and a span8div in the html, the html code is like this:
我在html中有一个span4和一个span8div，html代码是这样的：
<div class="row">
<div class="span4">Content of span4</div>
<div class="span8">Content of span8</div>
</div>
In order to do that, I should not only rewrite the margin-leftto 0, but also have to customize the width of span4 and span8's.So here is the code that works for me:
为了做到这一点，我不仅应该将margin-left重写为 0，而且还必须自定义 span4 和 span8 的宽度。所以这是对我有用的代码：
.no-space [class*="span"]{
margin-left: 0 !important;
&.span8{
width: 75%;
}
&.span4{
width: 25%;
}
}
Thanks for the inspiration!
谢谢你的灵感！
回答by pkmelee337
I wanted to use span's with margin and span's without margin in my HTML. When using less this is very easy. Just create your own less file, name it something like "no-margin-span.less" and include it somewhere in the less code. After that you can use "no-margin-span5" instead of "span5" in your html file. This works the same with for example "no-margin-offset5" and "offset5". The "no-margin-span.less" file should have the following code:
我想在我的 HTML 中使用带边距的跨度和不带边距的跨度。当使用较少时，这很容易。只需创建您自己的 less 文件，将其命名为“no-margin-span.less”，并将其包含在 less 代码中的某处。之后，您可以在 html 文件中使用“no-margin-span5”而不是“span5”。这与例如“no-margin-offset5”和“offset5”的作用相同。“no-margin-span.less”文件应该有以下代码：
#grid {
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.no-margin-spanX (@index) when (@index > 0) {
(~".no-margin-span@{index}") { .no-margin-span(@index); }
(~'.no-margin-span@{index}:first-child') { .no-margin-spanFirstChild(@index); }
.no-margin-spanX(@index - 1);
}
.no-margin-spanX (0) {}
.no-margin-offsetX (@index) when (@index > 0) {
(~'.no-margin-offset@{index}') { .no-margin-offset(@index); }
.no-margin-offsetX(@index - 1);
}
.no-margin-offsetX (0) {}
.no-margin-offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
.no-margin-span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
}
.no-margin-spanFirstChild (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
[class*="no-margin-span"] {
.input-block-level();
float: left;
margin-left: 0;
}
// generate .no-margin-spanX and .no-margin-offsetX
.no-margin-spanX (@gridColumns);
.no-margin-offsetX (@gridColumns);
}
}
}
EDIT - To make this code responsive, add the following code to the "no-margin-span.less" file:
编辑 - 要使此代码具有响应性，请将以下代码添加到“no-margin-span.less”文件中：
@media (max-width: 767px) {
// Make all grid-sized elements block level again
[class*="no-margin-span"],
.uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"],
[class*="no-margin-span"]:first-child,
.uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"]:first-child {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.no-margin-span12,
.row-fluid .no-margin-span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
// Make no-margin-span* classes full width
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="no-margin-span"],
select[class*="no-margin-span"],
textarea[class*="no-margin-span"],
.uneditable-input {
.input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="no-margin-span"],
.input-append input[class*="no-margin-span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
margin-left: 0;
}
}
