样式Bootstrap btn-group-justified，添加边距和垂直大小

Question

我想使用广播btn-group-justified字段（http://getbootstrap.com/javascript/#buttons-examples）设置原始Bootstrap input的样式。

原始风格如下：

但是我想让每个按钮成为一个方形按钮，并在彼此之间给它们一些空白。这样的事情：

我尝试使用Bootstrap示例中的一些修改过的html标记

[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并没有像我想要的那样设置我的按钮... 我想要实现的功能是有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-group-justified类而不仅仅是btn-group，那么   变得合理，但仍然没有方形，也没有边缘   他们之间

我认为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()); });