樣式Bootstrap的btn羣對齊，添加邊距和垂直尺寸

Question

我想用無線電input字段（http://getbootstrap.com/javascript/#buttons-examples）對原始Bootstrap的btn-group-justified進行樣式設計。

原來的風格是這樣的：

但我想使每個按鈕方形按鈕，讓他們相互之間的所有一些空白。事情是這樣的：

我是從自舉的例子

[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將顯示器設置爲表格。要添加兩種細胞之間的保證金，你需要border-spacing在margin代替（參見：Why is a div with "display: table-cell;" not affected by margin?）

現在你有HTML：

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

哪將如下所示：

請注意你有矩形而不是正方形。 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()); });