Bootstrap对齐工具栏按钮以填充行数宽度

Question

我有一个带有许多按钮的长工具栏，工具栏根据屏幕宽度进行包装。有没有办法让每行包裹的每个按钮以任何方式对齐以填充整个行宽。

这是我正在使用的当前代码。

<div class="btn-toolbar text-center" role="toolbar">
  <a href="#" class="btn btn-success">Link 1</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 1111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 111111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 1111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 1111111</a>
  <a href="#" class="btn btn-success">Link 111111111</a>
  <a href="#" class="btn btn-success">Link 111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 11</a>
  <a href="#" class="btn btn-success">Link 11111111111</a>
  <a href="#" class="btn btn-success">Link 11111</a>
  <a href="#" class="btn btn-success">Link 1</a>
</div>

和一些用于产生行间距的css：

.btn-toolbar>.btn, .btn-toolbar>.btn-group, .btn-toolbar>.input-group {
    margin-bottom: 0.3em;
    /*padding: .2em .3em;*/
}

我不介意使用一些jquery或其他引导组件来解决这个问题。

Answer 1

工作的CSS是：

.btn-toolbar{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
} 
.btn-toolbar .btn{
    -webkit-box-flex-grow: 1;
    -moz-box-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}