Question

我玩了一些bootstrap，然后我发现了关于如何使span类居中的烦人问题。在尝试偏移以对某些跨度进行居中后，我可以将某个跨度类居中（如span8与offset2，或span6与偏移量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，这使得我难以将范围居中。

Answer 1

居中“均匀”.spanN？使用.offsetN

<div class="span10 offset1">

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

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

Answer 2

这在Bootstrap 3中没有问题，但是对于Bootstrap 2.x，我已经提出了一个CSS解决方案，可以创建一个半年的＆＃39;偏移，可用于居中（几乎）奇数个跨度。这些半跨度创建的百分比是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

以Twitter Bootstrap网格为中心“奇数”

2 个答案: