一排多跨推特启动
使用Twitter的Bootstrap标准940‘m流体网格响应网格，我试图在一个.row中获得多个.rowdiv。
我想在页面的每一行显示最多3.span，所以随着页面的增加，它们只会被添加到.row中。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="span4">1</span>
<div class="span4">2</span>
<div class="span4">3</span>
<div class="span4">4</span> <!-- wrap to a new line-->
<div class="span4">5</span>
</div>
</div>
</div>我面临的问题是，封装到新行的span4具有继承的左边框。虽然我可以在现代浏览器中用nth-child()修复这个问题，但它显然仍然会影响IE。
我有什么办法做到这一点吗？
回答 3
Stack Overflow用户
发布于 2012-03-01 20:20:42
我决定使用第n个子选择器来删除某些..span的边距。
320 to至979 to的一列跨度
从980 to到1409 to的两列跨度
用于1409 up及以上的三列跨度
@media (min-width: 320px) and (max-width:979px) {
/* one column */
.row-fluid .span4 {width:100%}
.row-fluid .span4 {margin-left:0;}
}
@media (min-width: 980px) and (max-width:1409px) {
/* two columns, remove margin off every third span */
.row-fluid .span4 {width:48.717948718%;}
.row-fluid .span4:nth-child(2n+3) {margin-left:0;}
}
@media (min-width: 1410px) {
/* three columns, .span4's natural width. remove margin off every 4th span */
.main .span4:nth-child(3n+4) {margin-left:0;}
}对于IE7和8，我在css中将每个跨度的宽度设置为48.717948718% (所以每行两行)--通过使用html5 bolierplate .oldie html类特别针对这些版本。然后，我使用了在https://gist.github.com/1333330上找到的对nthchild的自定义测试，并在浏览器不支持第n个子选择器的情况下，删除了每个偶数跨度的边距。
if (!Modernizr.nthchildn) {
$('.span4:even').addClass('margless');
}Stack Overflow用户
发布于 2012-03-13 22:14:00
您的问题指定要让列自动包装到下一行，但是在Bootstrap的网格系统中，.span是专门设计成在.row中工作的，这就是网格。代码中根本没有使用任何.row。因此，我的建议是，如果您保持对网格的忠诚度，那么您的代码应该如下所示：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div> <!-- wrap to a new line-->
<div class="span4">5</div>
</div>
</div>
</div>
</div>下面是一个显示OP示例和另一个清晰性的jsfiddle。http://jsfiddle.net/qJ55V/5/
您必须使用.row (而不是.row-fluid)，以便将继承的样式应用于每一列(span)。是的，这是额外的标记，但不使用.row将不幸地导致您的列混乱。
Stack Overflow用户
发布于 2012-02-28 07:48:54
可能不是最优雅的解决方案，但我只是在自定义样式表中定义了一个新的css类，如：
.margless{
margin:0 !important;
}然后，我将它应用于任何我不想有边距的元素。我遇到了同样的事情使用引导，并没有找到一个替代的解决方案。
https://stackoverflow.com/questions/9478103
复制相似问题
腾讯云开发者
