html - 样式化 Bootstrap 的 btn-group-justified，添加边距和垂直调整大小

Question

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

原始样式如下所示：

但我想让每个按钮都变成方形按钮，并在它们之间给它们一些空白。像这样的东西：

我正在尝试从 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（请参阅：为什么带有“display: table-cell;”的 div 不受边距影响？）

现在你有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 缩放高度以匹配宽度 - 可能使用格式因子）

$(".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()); });