使用 Twitter Bootstrap 网格将“奇数”跨度居中答案

【问题标题】：Centering "odd" spans with Twitter Bootstrap grid使用 Twitter Bootstrap 网格将“奇数”跨度居中
【发布时间】：2012-09-12 11:23:57
【问题描述】：

我玩了一点引导程序，然后我发现了一个关于如何使跨度类居中的烦人问题。在尝试使用偏移对某个跨度进行居中之后，我可以将某个跨度类居中，例如（span8 与 offset2，或 span6 与 offset 3），但问题是，我想将 span7/span9/span10 居中。

然后我尝试使用一些技巧来居中 span10...

<div class="container"> <!--Or span12 since the width are same-->
  <div class="row">
    <div class="span1" style="background:black;">Dummy</div>
    <div class="span10" style="background:blue;">The Real One</div>
    <div class="span1" style="background:black;">Dummy</div>
  </div>
</div>

除了使用上面的代码之外，有什么解决办法吗？

如果我想将 span7、span9 甚至 span11 居中而不更改 row margin-left 值，我该怎么办？因为类行已经将 margin-left 设置了 20px，这让我很难将 span 居中。

【问题讨论】：

你说的是class="row-fluid"那一行吗？

标签： css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

居中“偶数”.spanN?使用.offsetN

<div class="span10 offset1">

居中“奇数”.spanN?不可能使用框架资源。当您决定使用 Twitter Bootstrap 时，您假设使用网格。如果将“奇数”列宽元素居中，则会破坏网格，因此没有 Bootstrap 工具可以做到这一点。

有一个理论上（但很奇怪）的解决方案：复制列数。在 24 列布局中，.span7 变为 span14，您可以使用 .offset5 居中。

【讨论】：

【解决方案2】：

这在 Bootstrap 3 中不是问题，但对于 Bootstrap 2.x，我提出了一个 CSS 解决方法，它创建一个“半”偏移量，可用于居中（几乎）奇数个跨度。这些半跨度创建的百分比是 bootstrap.css 中标准 offsetX 的一半

/* odd span centering helpers */

  .row-fluid .offsetHalf {margin-left:8.5% !important;}
  .row-fluid .offsetHalf1 {margin-left:12.9% !important;}
  .row-fluid .offsetHalf2 {margin-left:21.6% !important;}
  .row-fluid .offsetHalf3 {margin-left:25.6% !important;}

Link to demo

【讨论】：