在列中均匀分布按钮(元素)

Question

我一直在尝试使用bootstrap实现类似键盘的小部件.

这是对手头问题的重建:

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

这样的问题是标记为1,2和3的按钮没有均匀展开以填充3列宽父级.

现在,我知道btn-group-justified我可以使用类,但它会拉伸按钮以适合父级的宽度.我想要的是在按钮之间添加填充物.

可以使用Bootstrap完成,或者我应该使用display: table或一些涉及边距的奇怪的巫毒代码.

Answer 1

嵌套行怎么样？

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