Bootstrap對齊工具欄按鈕來填充entier行寬度

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