使用引导程序均匀填充行

我试图在使用引导程序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

使用引导程序均匀填充行

回答

相关问题