html - 如何使无限数量的按钮保持在同一行

Question

我有这样的需求，我需要在同一行中放置无限数量的按钮。

按钮的宽度需要适应不同的按钮数量。

这是我原来的 fiddle ...

http://jsfiddle.net/zL7tU/

<div class="container-fluid">
<div id="container" class="btn-group">
    <button type='button' class="btn btn-primary">1</button>
    <button type='button' class="btn btn-primary">2</button>
    <button type='button' class="btn btn-primary">3</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
    <button type='button' class="btn btn-primary">4</button>
</div>

附加要求:这些按钮上不会有文字。在我的例子中，每个按钮代表一个测试用例执行结果。例如，绿色按钮表示通过，红色按钮表示失败。我只需要看到颜色的变化，这样我就可以知道测试用例是否稳定。

也许，按钮可以非常小，就像一条垂直线。

Answer 1

将 display:flex 设置为 btn-group 类。

.btn-group {
    display: flex;
}

FIDDLE 或 BOOTPLY