使用Twitter Bootstrap在一行中多個跨度

使用Twitter的Bootstrap標準940px流體網格響應網格我試圖獲得多個.span div的一個.row。使用Twitter Bootstrap在一行中多個跨度

我想在每個與頁面一起生長的內部行上顯示最多3個.span。所以隨着更多.span的添加，他們只會被添加到.row。

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <div class="span4">1</span> 
     <div class="span4">2</span> 
     <div class="span4">3</span> 
     <div class="span4">4</span> <!-- wrap to a new line-->     
     <div class="span4">5</span>  
    </div> 
    </div> 
</div>

我現在面臨的問題是，它封裝到一個新的行span4具有繼承留有餘量。雖然我可以在現代瀏覽器中使用nth-child（）修復此問題，但它顯然仍然會影響IE。

任何想法，我可以如何實現這一點？

來源

2012-02-28 mindwire22

你想做什麼？你爲什麼不把它們放在兩個單獨的'.row'中？你每行只能放3個'.span4's，而且你的代碼中甚至沒有'div.row's。 – 2012-02-28 08:26:43

忘了提及我也希望行在某個頁面寬度處捕捉到兩行的每行。我看到的問題是，如果在兩行上有5個span4，我將如何獲得第二行的第一個span4出現在第一行的最後一個span4旁邊？ – mindwire22 2012-02-28 19:20:00

我決定使用第n個子選擇器刪除某些.span的邊距。所以，我最後的解決方法看起來喜歡這樣的：

一爲320像素到979px跨度爲980px的

兩列跨距列跨距1409px

三列1409px最多

@media (min-width: 320px) and (max-width:979px) { 
    /* one column */ 
    .row-fluid .span4 {width:100%} 
    .row-fluid .span4 {margin-left:0;} 
} 

@media (min-width: 980px) and (max-width:1409px) { 
    /* two columns, remove margin off every third span */ 
    .row-fluid .span4 {width:48.717948718%;} 
    .row-fluid .span4:nth-child(2n+3) {margin-left:0;} 
} 

@media (min-width: 1410px) { 
    /* three columns, .span4's natural width. remove margin off every 4th span */ 
    .main .span4:nth-child(3n+4) {margin-left:0;} 
}

對於IE7和8，我在CSS中將每個跨度的寬度設置爲48.717948718％（因此每行兩個） - 使用html5 bolierplate .oldie html類專門針對這些版本。然後，我使用Modernizr和https://gist.github.com/1333330找到的nthchild的自定義測試，並刪除每個偶數跨度的邊距，如果瀏覽器不支持第n個子選擇器。

if (!Modernizr.nthchildn) { 
    $('.span4:even').addClass('margless'); 
}

來源

2012-03-01 20:20:42 mindwire22

可能不是最完美的解決方案，但我只是在我的自定義樣式表定義一個新的CSS類，如：

.margless{ 
    margin:0 !important; 
}

然後我把它應用到，我不希望有任何的利潤元素。我用bootstrap遇到同樣的事情，找不到替代解決方案。

來源

2012-02-28 07:48:54 RazorThin

謝謝！這對我很好！ – flipchart 2012-11-30 05:24:25

大把戲！有用。 – LeftyX 2013-02-20 11:59:03

你的問題指定要列自動換到下一行，而是在引導的網格系統.span s的特別設計爲.row內工作，這就是網格。您的代碼中完全沒有使用任何.row。所以我的建議，如果你忠於電網，是有你的代碼看起來是這樣的：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="span4">1</div> 
     <div class="span4">2</div> 
     <div class="span4">3</div> 
     <div class="span4">4</div> <!-- wrap to a new line-->     
     <div class="span4">5</div> 
     </div> 
    </div> 
    </div> 
</div>

這裏是一個的jsfiddle，顯示OP的例子，另一個用於清晰度。 http://jsfiddle.net/qJ55V/5/

您必須使用.row（而不是.row-fluid）才能獲得應用於每個列（跨度）的繼承樣式。是的，這是額外的標記，但不使用.row不幸會導致您的列混亂。

來源

2012-03-13 22:14:00 jonschlinkert

使用Twitter Bootstrap在一行中多個跨度

回答

相關問題