如何細分Bootstrap 2網格中的第一列？

我有這樣的事情：如何細分Bootstrap 2網格中的第一列？

<div class="row-fluid"> 
    <div class="span1"> Nr </div> 
    <div class="span11"> Text </div> 
</div>

的問題是，第一列佔用的行寬度的8.3％，但我只希望它佔用寬度的5％ - 與整個剩餘部分95％用於第二欄。

如何細分第一列，然後將其餘部分添加到第二列？

來源

2015-10-26 Gerhard Liebenberg

這是一個相當嚴厲的辦法。你通常不想惹你的網格列。您是否可以對齊第一列的內容以獲得相同的結果？ – isherwood

@isherwood。謝謝。是的，我可以做到這一點，但我試圖在打印輸出中使用html - 所以我需要使用更精細的測量功能。另一個問題是，如果你使用一個更大的屏幕（+32英寸），那麼在一個領域浪費整個跨度看起來非常愚蠢。 –

好吧，如果你使用的是容器，那麼這個頁面永遠不會變得瘋狂。以下是可能的樣子。我用'span2'來更好地說明這項技術。 http://jsfiddle.net/isherwood/g97g16cw/ – isherwood

@media(min-width: 768px) { 
    .span1.five { 
     width: 5%; 
     background: pink; 
     display: inline-block; 
     text-align: center; 
    } 
    .span1.five + div { 
     width: 92%; /* << could be refined to get closer to the page margin */ 
    } 
}

Demo

你會想nest a row的span11元素中，進一步打破它。

Demo 2

來源

2015-10-26 19:30:55 isherwood

這些演示中的列不顯示內聯 - 或者我錯過了什麼？ –

你在看足夠大嗎？正如你所看到的，我沒有覆蓋768px以下寬度的移動（全角）樣式。 – isherwood

哎呀，我的錯誤，不得不拖動列寬。所以你基本上覆蓋了Bootstrap的寬度？看起來像最好的選擇，因爲它仍然是響應。很多thanx。 –

如何細分Bootstrap 2網格中的第一列？

回答

相關問題