Равномерно распределять кнопки (элементы) в столбцах

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 или какой-то странный код вуду с использованием полей.

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