7

我玩了一点引导程序，然后我发现了这个关于如何使跨度类居中的烦人问题。在尝试使用偏移对某个跨度进行居中之后，我可以将某个跨度类居中，例如（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 居中怎么办？因为类行已经将 margin-left 设置了 20px，这让我很难将跨度居中。

4

2 回答 2

4

以“偶数”为中心.spanN？利用.offsetN

<div class="span10 offset1">

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

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

于 2012-09-12T11:31:35.130 回答
3

这在 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;}

演示链接

于 2013-05-13T12:18:39.443 回答