Question

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

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

这是我最初的小提琴......

<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

Answer 2

这可能是一种方法。

我不会使用按钮元素，因为按钮样式和尺寸可能取决于浏览器。

从以下HTML开始：

<div class="container-fluid">
    <div class="status-group">
       <span class="status-bar" title="Tooltip text..."></span>
       <span class="status-bar" title="Tooltip text..."></span>
       <span class="status-bar" title="Tooltip text..."></span>
       <span class="status-bar" title="Tooltip text..."></span>
       <span class="status-bar" title="Tooltip text..."></span>
       <span class="status-bar" title="Tooltip text..."></span>
       <span class="status-bar" title="Tooltip text..."></span>
    </div>
</div>

并应用以下CSS：

.status-group {
    display: table;
    border: 1px dotted blue;
    width: 100%;
}
.status-group .status-bar {
    display: table-cell;
    width: auto;
    min-width: 20px;
    height: 20px;
    background-color: green;
}
.status-group .status-bar:nth-child(2n) {
    background-color: blue;
}

我不会使用Bootstrap按钮组样式。

相反，将CSS表定义为父容器.status-group并设置width: auto，以使总宽度为包含块的固定宽度布局的宽度。

要显示彩色状态栏，请定义CSS表格单元格.status-bar并为高度和最小宽度设置合理的值。

在这种情况下，表格单元格将具有由表格布局自动确定的相同宽度。当您添加更多状态栏时，宽度将按比例缩小，直到达到最小宽度限制（可能是1px）。

请参阅演示：http://jsfiddle.net/audetwebdesign/G6Fz7/

注意：如果您只有几个状态栏元素，结果将看起来像一系列宽矩形，但您可以使用表格宽度（自动而不是100％）并尝试表格单元格宽度获得更令人满意的结果。

要添加工具提示，您可以使用title元素上的span属性。如果你想要更优雅的东西，你可能需要使用一些工具提示库，但它可以完成。

如果您想使用按钮元素，则需要按如下方式调整标记：

   <span class="status-bar">
       <button  title="Tooltip text...">1</button>
   </span>

将按钮设置为span.status-bar的子元素，因为button无法识别CSS表格单元格显示值。

Answer 3

在bootstrap中，基于您的代码：

<div class="container-fluid">
<div id="container" class=" row-fluid btn-group">
<button>1</button>
<button>20000</button>

这对我有用，使用'row-fluid'它会将所有组件排成一行。

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

3 个答案: