使用 Twitter Bootstrap 连续多个 Span答案

【问题标题】：Multiple Spans In One Row with Twitter Bootstrap使用 Twitter Bootstrap 连续多个 Span
【发布时间】：2012-03-17 16:45:33
【问题描述】：

使用 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。

有什么想法可以实现吗？

【问题讨论】：

你想做什么？你为什么不把它们放在两个单独的.rows 中呢？您每行只能容纳 3 个.span4s，而且您的代码中甚至没有任何div.rows。
忘了提到我还希望行在特定页面宽度下每行对齐两个跨度。我看到的问题是，如果两行有 5 个 span4 - 如何让第二行的第一个 span4 出现在第一行的最后一个 span4 旁边？

标签： css less twitter-bootstrap

【解决方案1】：

您的问题指定您希望列自动换行到下一行，但在 Bootstrap 的网格系统中，.spans 专门设计为在 .row 内工作，这就是网格。您的代码中根本没有使用任何 .rows。所以我的建议是，如果你忠于网格，你的代码应该是这样的：

<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>

这是一个 jsfiddle，它显示了 OP 的示例和另一个为清楚起见。 http://jsfiddle.net/qJ55V/5/

您必须使用.row（而不是.row-fluid）才能将继承的样式应用于每列（跨度）。是的，这是额外的标记，但不幸的是，不使用 .row 会导致您的列混乱。

【讨论】：

【解决方案2】：

我决定使用 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 自定义测试，如果浏览器不支持 nth-child 选择器，则删除每个偶数跨度的边距。

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

【讨论】：

【解决方案3】：

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

.margless{
    margin:0 !important;
}

然后我将它应用于我不想有边距的任何元素。我使用引导程序遇到了同样的问题，但找不到替代解决方案。

【讨论】：