Html 如何在没有间距的情况下进行多个跨度 twitter bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10718152/
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 to do multiple spans twitter bootstrap without spacing between
提问by falter
I'm trying to get 3 columns on a page without any spacing between them in bootstrap
我试图在引导程序中在页面上获得 3 列，而它们之间没有任何间距
here is what I get:
这是我得到的：
here is what I want:
这是我想要的：
here is the code I'm currently using:
这是我目前使用的代码：
<div class="row">
<div class="span4 blue1">
<h1>span4 (1)</h1>
</div>
<div class="span4 blue2">
<h1>span4 (2)</h1>
</div>
<div class="span4 blue3">
<h1>span4 (3)</h1>
</div>
</div>
I'm really not sure how to achieve what I want using bootstrap - any help appreciated
我真的不确定如何使用引导程序实现我想要的 - 任何帮助表示赞赏
回答by Andres Ilich
You can create your own class that removes that space in between your spangrid elements like so:
您可以创建自己的类来删除span网格元素之间的空间，如下所示：
CSS
CSS
.no-space [class*="span"] {
margin-left: 0;
}
Then you can just include it inside the container .rowdiv:
然后你可以将它包含在容器.rowdiv 中：
<div class="row no-space">
<div class="span3 blue1">
<h1>span4 (1)</h1>
</div>
<div class="span3 blue2">
<h1>span4 (2)</h1>
</div>
<div class="span3 blue3">
<h1>span4 (3)</h1>
</div>
</div>
Also note that the .rowcontainer class removes 20pxon the left side to accommodate the grid elements so you might have to remove that as well like so:
另请注意，.row容器类20px在左侧删除以容纳网格元素，因此您可能必须像这样删除它：
.no-space {
margin-left:0;
}
So play around to see what works.
所以四处看看有什么用。
回答by alvaro.canepa
Complete class, overwritten .row-fluid with add .no-space.
完整的类，用添加 .no-space 覆盖 .row-fluid。
/*
* Bootstrap Grid System without space
*
* Overwrite Bootstrap grid system, removing margin
* Usage :
* Simple add no-space class with row-fluid
* <ul class="row-fluid no-space"> ... </ul>
*/
.row-fluid.no-space [class*="span"] {
margin-left: 0%;
*margin-left: -0.06944%;
}
.row-fluid.no-space [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid.no-space .controls-row [class*="span"] + [class*="span"] {
margin-left: 0%;
}
.row-fluid.no-space .span12 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.row-fluid.no-space .span11 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.row-fluid.no-space .span10 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.row-fluid.no-space .span9 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.row-fluid.no-space .span8 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.row-fluid.no-space .span7 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.row-fluid.no-space .span6 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.row-fluid.no-space .span5 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.row-fluid.no-space .span4 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.row-fluid.no-space .span3 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.row-fluid.no-space .span2 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.row-fluid.no-space .span1 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
.row-fluid.no-space .offset12 {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset12:first-child {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset11 {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset11:first-child {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset10 {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset10:first-child {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset9 {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset9:first-child {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset8 {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset8:first-child {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset7 {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset7:first-child {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset6 {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset6:first-child {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset5 {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset5:first-child {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset4 {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset4:first-child {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset3 {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset3:first-child {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset2 {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset2:first-child {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset1 {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
.row-fluid.no-space .offset1:first-child {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
Usage:
用法：
<ul class="media-list row-fluid no-space">
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
</ul>
回答by John Magnolia
I added: offset0for this exact reason
我补充说：offset0正是因为这个原因
.row-fluid .offset0 {
margin-left: 0
}
.row-fluid .span12.offset0 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.row-fluid .span11.offset0 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.row-fluid .span10.offset0 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.row-fluid .span9.offset0 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.row-fluid .span8.offset0 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.row-fluid .span7.offset0 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.row-fluid .span6.offset0 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.row-fluid .span5.offset0 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.row-fluid .span4.offset0 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.row-fluid .span3.offset0 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.row-fluid .span2.offset0 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.row-fluid .span1.offset0 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
回答by Jon Cram
The column spacing you see is an intent of the grid system.
您看到的列间距是网格系统的意图。
If you wish not to have spaces between columns you should style these elements directly and not use the grid layout styling.
如果您不希望列之间有空格，您应该直接设置这些元素的样式，而不是使用网格布局样式。
回答by periklis
If you are using the less files to produce the bootstrap css, set the @gridGutterWidth to 0 inside the variables.less file. Otherwise, I suppose it's a real pain to change all the margins and paddings on the css file.
如果您使用较少的文件来生成引导 css，请在 variables.less 文件中将 @gridGutterWidth 设置为 0。否则，我认为更改 css 文件上的所有边距和填充真的很痛苦。
回答by EIIPII
If you check the grid.less file in bootstrap, the span* grid is defined in a simple mixin:
如果你检查 bootstrap 中的 grid.less 文件，span* 网格是在一个简单的 mixin 中定义的：
#grid > .core(@gridColumnWidth, @gridGutterWidth);
To build a span* grid without spaces you can use in less:
要构建一个没有空格的 span* 网格，您可以使用 less：
.my-nospace-grid {
#grid > .core(78px, 0px);
}
This will give 12*78px = 936px.
这将给出 12*78px = 936px。
To choose Your values, check the default sizes defined in variables.less:
要选择您的值，请检查 variables.less 中定义的默认大小：
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
回答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 Nikolay Georgiev
Here is an example of equal width columns with and without spaces: http://codepen.io/ngeorgiev/pen/Lgxin/
以下是带空格和不带空格的等宽列的示例：http: //codepen.io/ngeorgiev/pen/Lgxin/
回答by Pubudu Danushka
<div>
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div style="background:#000;" class="span6">testcont 1</div>
<div style="background:#000;" class="span6">testcont 2</div>
<div style="background:#000;" class="span6">testcont 3</div>
<div style="background:#000;" class="span6">testcont 4</div>
</div>
</div>
</div>
</div>
</div>
回答by Thor
In general, if you still want to keep the gutter, but just want to narrow or widen it without creating gaps at the far right, then just make sure that the relevant margins and widths add to 100%, bearing in mind that a margin is not applied to the leftmost span. So for your 3 column layout, if you wanted, say, a 0.5% gutter, then choose 3*33% + 2*0.5% = 100%
一般来说，如果您仍然想保留装订线，但只是想缩小或扩大它而不在最右侧产生间隙，那么只需确保相关边距和宽度加起来为 100%，记住边距是不适用于最左边的跨度。所以对于你的 3 列布局，如果你想要一个 0.5% 的装订线，那么选择 3*33% + 2*0.5% = 100%
.row-fluid .span4 {
width: 33%;
margin-left: 0.5%;
}
