使用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居中「奇怪」跨度

回答

相關問題