CSS - ボタン間のスペースでブーストラップbtn-group-justified

Question

次の例では、ボタンがほとんど区別できないことがわかり、btn-toolbarのようなボタンの間隔を使用したいと考えています。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="btn-toolbar" 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>

：しかし私は、ボタンが非常に小さくなり、全体のdivに

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="btn-group 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>

を満たしていないので、私は間隔がこのようになりたいという使用カント

Answer 1

1つの以上のソリューションです。 BTN-グループは、グループの唯一の左端と右端を丸めているので、あなたはむしろ<div class=" btn-group btn-group-justified" role="group">から.btn-groupを削除したい、その後、あなたが防ぐために、この.btn-groupために高い特異性を定義することができます望むようにクラス.btn-group

の内側のdiv要素にパディングを設定します外のスタイルの広がり。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<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>

Answer 2

ブートストラップグリッドシステムを使用できます。ここで

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row"> 
 
<div class=" btn-group btn-group-justified" role="group"> 
 
<div class=" col-xs-5"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-primary">Yes</button> 
 
     </div> 
 
    </div> 
 
    <div class=" col-xs-5"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-primary">No</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

あなたは、以下のようなものをお探しですか？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
     <button type="button" class="btn btn-primary btn-lg btn-block">Yes</button> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <button type="button" class="btn btn-default btn-lg btn-block">No</button> 
 
    </div> 
 
</div>

この情報がお役に立てば幸いです。