Distribute buttons (elements) evenly in columns

Question

I have been trying to implement a keypad-like widget using bootstrap.

Here is a reconstruction of the problem at hand:

<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 with this is that the buttons labelled 1, 2 and 3 are not spread out evenly to fill the 3 column width parent.

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

Can that be accomplished using Bootstrap or should I use display: table or some weird voodoo code involving margins.

Answer 1

How about a nested row?

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>
            ...