How to make indefinite amount of buttons stay in the same line

Question

I have such a requirement that I need to put indefinite amount of buttons in the same line.

The button's width needs to be adaptable to different button amount.

Here is my original 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>

Additonal requirement: There will be no text on those buttons.In my case,each button represents a test case execution result.For example,green button for passed one,red button for failed one.I just need to see the change of color so that i can know if the test case is stable.

Probably, the button could be very small just like one vertical line.

Answer 1

In bootstrap , based on your code:

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

This worked for me, using the 'row-fluid' it will put all components in a row.

Answer 2

Here is one approach that might do the trick.

I would not use button elements since button styling and dimensions can be browser dependent.

Start with the following 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>

and apply the following 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;
}

I would not use the Bootstrap button group styling.

Instead, define a CSS table as the parent container .status-group and set width: auto so that the total width is that of the fixed-width layout containing block.

To display the colored status bar, define a CSS table-cell .status-bar and set a reasonable value for the height and the minimum-width.

In this case, the table-cells will all have the same width automatically determined by the table layout. As you add more status bars, the width will shrink proportionately until it reaches the minimum-width limit (could be 1px).

See demo at: http://jsfiddle.net/audetwebdesign/G6Fz7/

Note: If you have only a few status-bar elements, the result will look like a series of wide rectangles, but you can play with the table width (auto instead of 100%) and experiment with the table-cell width to get a more pleasing result.

To add tool-tips, you can use the title attribute on the span element. If you want something more elegant, you may need to use some tool-tip library, but it can be done.

If you want to use button elements, you need so adjust the mark-up as follows:

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

Place the button as a child-element of the span.status-bar because button's do not recognize the CSS table-cell display value.

Answer 3

Set display:flex to the btn-group class.

.btn-group {
    display: flex;
}

FIDDLE or BOOTPLY