twitter-bootstrap 在行流体中引导多行跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16103438/
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
Bootstrap multiple rows of spans in a row-fluid
提问by mackwerk
This questionis very similar, although it doesn't answer my question.
这个问题非常相似，虽然它没有回答我的问题。
An answer like thiswould be fine, as long as it works for responsive layouts e.g. .row-fluid, which it doesn't at the moment.
像这样的答案会很好，只要它适用于响应式布局，例如.row-fluid，目前还没有。
Is it possible in Bootstrap to have one fluid row and multiple rows within that row like so:
在 Bootstrap 中是否有可能在该行中有一个流体行和多行，如下所示：
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
</div>
<div class="span12">
</div>
<div class="span12">
</div>
</div>
</div>
without the second row of spans having an odd margin-left?
如果第二行 span 没有奇数的左边距？
Click here for a JSFiddle example
Essentially what I need is to have multiple rows of spans inside a .row-fluidwithout the rows after the first breaking the layout.
基本上我需要的是.row-fluid在第一次打破布局后在没有行的情况下有多行跨度。
回答by MasNotsram
Well the displacement is caused by a margin-left.
那么位移是由左边距引起的。
It's not ideal but you could always override the CSS:
这并不理想，但您始终可以覆盖 CSS：
.container-fluid .row-fluid [class*="span"] {
margin-left:0px;
}
Acutally though, the error seems to lie in the fact that you've declared 12 span3 DIVs, which adds up to a total of 36. 12 is the limit for a fluid container, so you'd need to make those span1:
但实际上，错误似乎在于您声明了 12 个 span3 DIV，加起来总共 36 个。12 是流体容器的限制，因此您需要制作这些 span1：
<div class="container-fluid">
<div class="row-fluid">
<div class="span1">1
</div>
<div class="span1">2
</div>
<div class="span1">3
</div>
<div class="span1">4
</div>
<div class="span1">5
</div>
<div class="span1">6
</div>
<div class="span1">7
</div>
<div class="span1">8
</div>
<div class="span1">9
</div>
<div class="span1">10
</div>
<div class="span1">11
</div>
<div class="span1">12
</div>
</div>
<div class="row-fluid">
<div class="span3">
1
</div>
<div class="span3">
2
</div>
<div class="span3">
3
</div>
<div class="span3">
4
</div>
</div>
<div class="row-fluid">
<div class="span3">
1
</div>
<div class="span3">
2
</div>
<div class="span3">
3
</div>
<div class="span3">
4
</div>
</div>
</div>
See here:
看这里：
回答by Paulo Washington
In bootstrap 3 it is possible to insert several (.span) within a same row. What I find most interesting, does not break the layout and works the responsiveness. In bootstrap 2 you have to obey the limete of 12 columns for each row. If this limit is exceeded, the margins contained in the other columns hinder the layout.
在引导程序 3 中，可以在同一行中插入多个 (.span)。我觉得最有趣的是，不会破坏布局并能提高响应能力。在引导程序 2 中，您必须遵守每行 12 列的石灰石。如果超过此限制，其他列中包含的边距会妨碍布局。
For my case I cleaned the column margins and inserted margins only for the right columns:
对于我的情况，我清理了列边距并仅为右列插入了边距：
Exemple - layout 2 Column
示例 - 布局 2 列
.myDiv{
.span6{
margin-left:0;
&:nth-child(even){
margin-left: 2.127659574468085%;
}
}
}
and responsive 767px
和响应式 767px
@media (max-width: 767px) {
.myDiv{
.span6{
margin-left:0;
&:nth-child(even){
margin-left: 0;
}
}
}
}
