スタイリングブートストラップのbtn-group-justified、マージンとサイジングを垂直方向に追加する

Question

オリジナルのブートストラップのbtn-group-justifiedをラジオinputフィールド（http://getbootstrap.com/javascript/#buttons-examples）でスタイルしたいと思います。

オリジナルのスタイルは、次のようになります。

が、私はすべてのボタン正方形のボタンを作成し、それらを相互間のすべてのいくつかの空白を与えたいと思います。このような何か：

私はブートストラップ例

[data-toggle="buttons"] .btn>input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.category-select .btn-container { 
 
    position: relative; 
 
    width: 19%; 
 
    padding-bottom: 19%; 
 
    float: left; 
 
    height: 0; 
 
    margin: 1%; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.btn-container .btn, 
 
.btn-container .btn input { 
 
    max-width: 100%; 
 
}

<div class="btn-group-justified category-select" data-toggle="buttons"> 
 
    <div class="btn-container"> 
 
    <label class="btn category category-one"> 
 
      <input type="radio" name="options" id="option1"> One 
 
     </label> 
 
    </div> 
 
    <div class="btn-container"> 
 
    <label class="btn category category-two"> 
 
      <input type="radio" name="options" id="option2"> Two 
 
     </label> 
 
    </div> 
 
    <div class="btn-container"> 
 
    <label class="btn category category-three"> 
 
      <input type="radio" name="options" id="option3"> Three 
 
     </label> 
 
    </div> 
 
    <div class="btn-container"> 
 
    <label class="btn category category-four"> 
 
      <input type="radio" name="options" id="option4"> Four 
 
     </label> 
 
    </div> 
 
    <div class="btn-container"> 
 
    <label class="btn category category-five"> 
 
      <input type="radio" name="options" id="option5"> Five 
 
     </label> 
 
    </div> 
 
</div>

が、私が望むようもちろん、このCSSは私のボタンのスタイルを設定しませんから少し修正HTMLマークアップをしようとしていました...私が達成したい
機能は、5つのボタンを持って水平に正当化し、応答（すべてのブラウザのサイズで正方形）とラジオボタンのグループのように行動することです。

Answer 1

HTML

<div class="container"> 
<div class="btn-group blocks" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option1"> Option 1 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2"> Option 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3"> Option 3 
    </label> 
</div> 

CSS

.blocks .btn-primary 
{ 
    padding: 24px 12px; 
    margin: 0 5px; 
    border-radius: 0; 
} 

意志は次のようになります。

私はBTN-グループ詰めだけではなく、BTN-グループのクラスに適用した場合、彼ら が正当化が、まだ正方形ではないになりました、また彼らは私がbtn-group-justifiedクラスがないと思う

それらの間のマージンを持っています btn-groupなしで使用する予定です。 btn-groupを使用しないと違いはないようですが。

btn-group-justifiedは、テーブルに表示を設定します。 （参照：Why is a div with "display: table-cell;" not affected by margin?を）あなたはmarginの代わりにborder-spacingが必要になります二つの細胞間のマージンを追加するには：

<div class="container"> 
<div class="btn-group btn-group-justified blocks" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option1"> Option 1 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2"> Option 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3"> Option 3 
    </label> 
</div> 

CSS：

.blocks .btn-primary 
{ 
    padding: 24px 12px; 
    border-radius: 0; 

} 
.blocks {border-spacing:5px;} 

を今、あなたはHTMLを持っています

：のようになります。

は、あなたの代わりに正方形の長方形を持っています。 btn-group-justifiedは、その親の100％にグループの合計を設定します。四角形を作成するには、ボタンの（内側の）幅に基づいて高さを設定するjQueryが必要です。（CSS scale height to match width - possibly with a formfactorを参照）

$(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth()); 
$(window).resize(function(){ $(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth()); });