ブートストラップbtnツールバーの両端揃えボタン（btn-group btn-group-justifiedのような）

Question

最終目標：各ボタンの間にマージンを置いてdivの全幅をカバーするようにします。したがって、 '.btn-group .btn-group-justified'のように、マージンがあります。

検索中 Bootply

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group btn-group-justified" role="group"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default">Yes</button> 
 
    </div> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-default">No</button> 
 
    </div> 
 
</div>

は、私は、このSO解決策が見つかりました： https://stackoverflow.com/a/33315549/5003918

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-toolbar"> 
 
    <button type="button" id="btnSubmit" class="btn btn-success btn-sm">Yes</button> 
 
    <button type="button" id="btnCancel" class="btn btn-danger btn-sm">No</button> 
 
</div>

これは私のボタンの間の所望のマージンを与えるのが、私を与えるものではありません正当な機能

ボタンに「.btn-block」を追加しようとすると、幅の幅になりますが、それぞれ異なる行になります。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-toolbar text-center"> 
 
    <button type="button" id="btnSubmit" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-ok'></i> Yes</button> 
 
    <button type="button" id="btnCancel" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-remove'></i> No</button> 
 
</div>

があります似てSO questionですが、解決策を持っていません。

Bootply

Answer 1

あなたが後にしている何本か？ボタン間にスペースを追加するには、いくつかのCSSスタイリングが必要です。

.btn-group { 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group-justified" role="group"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-primary">Yes</button> 
 
    </div> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-primary">No</button> 
 
    </div> 
 
</div>