Distribute buttons (elements) in columns evenly

Question

I am trying to implement a keyboard-like widget using bootstrap.

Here is a reconstruction of the problem:

<div>
<div class="row">
    <span class="col-md-3">
        <button class="btn btn-lg btn-warning">1</button>
    <button class="btn btn-lg btn-warning">2</button>
    <button class="btn btn-lg btn-warning">3</button>
    </span>
    </div>

    <div class="row">
    <span class="col-md-3">
        <button class="btn btn-lg btn-warning btn-block">SPAN</button>
    </span>
    </div>
</div>

The problem is that the buttons labeled 1, 2 and 3 are not evenly distributed to fill the parent column 3 of the column.

Now I know that there is a class btn-group-justifiedthat I can use, but it stretches the buttons to fit the width of the parent. I want to add fillers between the buttons.

Can this be done using Bootstrap, or should I use display: tablesome kind of weird voodoo code including fields.

Answer 1

What about a nested string?

http://jsfiddle.net/isherwood/XGb89/

<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-xs-4 text-center">
                <button class="btn btn-lg btn-warning">1</button>
            </div>
            ...