Question

我正在尝试在使用Bootstrap 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”旁边的行中的剩余空间。我无法设置“width：33％”的值，因为每条记录都有可变数量的项目。

如何使用CSS / Bootstrap填充剩余空间并使用可变数量的项目均匀分布？

谢谢

Answer 1

我建议将视口分为两部分。如果您使用的是12 Grid System

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)

我希望这可以解决你的问题。

使用引导程序均匀填充行

1 个答案: