在列中均勻分配按鈕（元素）

Question

我一直在嘗試使用引導實現類似小鍵盤的小部件。

這是問題的手頭重建：

<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或者一些涉及頁邊距的奇怪的voodoo代碼。

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