使用Twitter Bootstrap grid居中“奇怪”跨度

我用bootstrap玩了一下，然后我发现了如何使span范围居中的烦人问题。在尝试用偏移量对一些跨度进行居中之后，我可以将某个跨度类居中（如span8与offset2或span6与偏移量3），但问题是，我想将span7/span9/span10居中。使用Twitter Bootstrap grid居中“奇怪”跨度

然后我试图利用一些技巧来定心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居中而不更改行边距左值，该怎么办？因为班级行已将剩余边距设置为20px，这使我很难将范围居中。

来源

2012-09-12 Xtrader

你说的是行['类=“排液”']（HTTP：// twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem）？ – Louis

nope，class =“row”。 – Xtrader

居中“偶”.spanN？使用.offsetN

<div class="span10 offset1">

围绕 “奇” .spanN？不可能使用框架资源。当你决定使用Twitter Bootstrap时，你假定使用网格。如果以“奇数”列宽元素为中心，则会打破网格，因此没有引导工具可以实现这一点。

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

来源

2012-09-12 11:31:35 albertedevigo

'+ 1'复杂。 – Louis

希望这将是Bootstrap 3中的一个非问题，但对于Bootstrap 2.x我想出了一个CSS解决方法，它创建了一个'half'偏移量，可用于居中（几乎）奇数个跨越。这些半跨度创建一个百分比的一半标准OFFSETX在bootstrap.css

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

来源

2013-05-13 12:18:39 ZimSystem

使用Twitter Bootstrap grid居中“奇怪”跨度

回答

相关问题