Question

使用Twitter的Bootstrap标准940px流体网格响应网格我试图在一个 {{{{{{{{{{{{{ 1}}。

我想在每个随页面增长的内部线路上显示最多3 .span个。因此，随着更多.span的添加，他们只会被添加到.row。

.span

我遇到的问题是包裹到新行的span4具有继承的左边距。虽然我可以在现代浏览器中使用nth-child（）解决这个问题，但它显然仍会影响IE。

我是如何实现这一目标的？

Answer 1

我决定使用nth-child选择器删除某些.span的边距。所以我的最终解决方案看起来像这样：

一列跨度为320px至979px

两列跨度为980px至1409px

1409px及以上的三列跨度

@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类专门针对这些版本。然后我使用了Modernizr和https://gist.github.com/1333330找到的nthchild自定义测试，如果浏览器不支持第n个子选择器，则删除每个偶数范围的边距。

if (!Modernizr.nthchildn) {  
  $('.span4:even').addClass('margless');
}

Answer 2

您的问题指定您希望列自动换行到下一行，但在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会导致您的列混乱。

Answer 3

可能不是最优雅的解决方案，但我只是在自定义样式表中定义了一个新的css类，例如：

.margless{
    margin:0 !important;
}

然后我将它应用于任何我不想要有边距的元素。我使用bootstrap遇到了同样的事情，无法找到替代解决方案。

使用Twitter Bootstrap在一行中实现多个跨度

3 个答案: