使用引導程序均勻填充行

我試圖在使用引導程序3的應用程序中顯示內容行。每行將容納行號和可變數量的塊。基本上，它看起來像這樣：使用引導程序均勻填充行

+---------------------------+ 
| 1 | Block 1 || Block 2 | 
+---------------------------+ 
| 2 | #1 || #2 || #3 || #4 | 
+---------------------------+ 
| 3 | One Large Block | 
+---------------------------+ 
| 4 | 1/3 || 2/3 || 3/3 | 
+---------------------------+

我可能有100行。因此，第一列（帶行號的那一列）的寬度將始終爲100px。但是，我希望剩餘的可用空間均勻地填充我的塊。目前，我有以下內容：

<style type="text/css"> 
    .record { 
    line-height: 20px; 
    min-height: 24px; 
    background-color: silver; 
    margin-bottom: 4px; 
    } 

    .item { 
      display: inline-block; 
      color:white; 
      margin: 2px; 
      padding: 0 10px; 
      font-size: 80%; 
     } 
</style> 

<div class="record"> 
    <span class="badge" style="width:100px;">04</span> 
    <a class="item" data-html="true" data-content="Item 1">1/3</a> 
    <a class="item" data-html="true" data-content="Item 2">2/3</a> 
    <a class="item" data-html="true" data-content="Item 3">3/3</a> 
</div>

這種方法的問題是，這些項目都是左對齊的。不要均勻地填充「04」旁邊的行中的剩餘空間。我無法設置「寬度：33％」的值，因爲每個記錄都會有可變數量的項目。

如何填充剩餘空間並使用CSS/Bootstrap將其均勻分佈到可變數目的項目中？

謝謝

來源

2014-10-30 user70192

您是否嘗試過使用flexbox來解決這個問題？ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Pianoc 2014-10-30 15:15:29

我會推薦的是，將視口分爲兩部分。如果您正在使用12網格系統

col-md-1 || Col-md-11

現在再次將col-md-11分成12個相等部分，並根據內容填充所需值，括號表示col-md-11又被分成幾部分。通過這種方式，你不需要硬編碼值。

col-md-1 || col-md-11 (col-md-6 , col-md-6) 
    col-md-1 || col-md-11 (col-md-4 , col-md-4, col-md-4) 
    col-md-1 || col-md-11 (col-md-3 , col-md-3, col-md-3, col-md-4) 
    col-md-1 || col-md-11 (col-md-2 , col-md-2, col-md-2, col-md-6)

我希望這能解決您的問題。

來源

2014-10-30 17:27:48

使用引導程序均勻填充行

回答

相關問題