twitter-bootstrap 如何在 Bootstrap 的跨度之间删除空间或没有空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16506635/
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
How do I remove the space or not have space in between the spans in Bootstrap?
提问by Lucas Santos
Ok so if you do:
好的，如果你这样做：
<div class="row-fluid">
<div class="span6"></div><!--span6 END-->
<div class="span6"></div><!--span6 END-->
</div><!--row END-->
picture that as 2 red boxes both taking 50% of the screen.. but every time I do this the span6 has a margin our in between each other and the row above it... How do I make it so that there is no margin above or in between the spans .. I want them to touch above and to the sides.
图片为 2 个红色框都占据了屏幕的 50% .. 但每次我这样做时，span6 在彼此之间和它上面的行之间都有一个边距......我如何制作它以便没有边距在跨度上方或之间.. 我希望它们在上方和两侧接触。
采纳答案by Mateusz
As you probably don't want to override all .span6elements, I'd suggest the following:
由于您可能不想覆盖所有.span6元素，我建议如下：
<div class="row-fluid">
<div class="span6" style="margin: 0px; background-color: red; width: 50%;">foo</div><!--span6 END-->
<div class="span6" style="margin: 0px; background-color: blue; width: 50%;">bar</div><!--span6 END-->
</div><!--row END-->
EDIT:
编辑：
As .row-fluiduses width: 100%and .row-fluid .span6uses width: 48.93617021276595%;, you also need to change width of those divs. See updated code and fiddle.
作为.row-fluiduseswidth: 100%和.row-fluid .span6uses width: 48.93617021276595%;，您还需要更改这些 div 的宽度。查看更新的代码和小提琴。
回答by meobyte
I would recommend not using grid spans if you don't need grid spans rather than overriding. If you're overriding practically every property of a class, you're better off just using a new class.
如果您不需要网格跨度而不是覆盖，我建议不要使用网格跨度。如果您实际上要覆盖一个类的所有属性，那么最好只使用一个新类。
.half {
margin: 0;
background-color: red;
width: 50%;
float:left;
}
<div class="row-fluid">
<div class="span12">
<div class="half">First</div>
<div class="half">Second</div>
</div>
</div>
