css - 使用 Twitter Bootstrap 一行中的多个跨度

Question

使用 Twitter 的 Bootstrap 标准 940px 流体网格响应网格，我试图在 一个 .row 中获取多个 .span div。

我想在随页面增长的每个内部行上最多显示 3 个 .span。因此，随着更多 .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。

有什么办法可以实现吗？

Answer 1

我决定使用第 n 个子选择器来删除某些 .span 的边距。所以我的最终解决方案是这样的:

一列范围为 320 像素到 979 像素

980px 到 1409px 的两列跨度

1409 像素及以上的三列跨度

@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');
}