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

Styling Bootstrap's btn-group-justified, adding margins and sizing vertically

提问by errata

I'd like to style the original Bootstrap's btn-group-justifiedwith radio inputfields (http://getbootstrap.com/javascript/#buttons-examples).

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

The original style looks like this:

原来的样式是这样的：

but I'd like to make every button a square-shaped button and give them all some whitespace between each other. Something like this:

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

I was trying with a bit modified html markup from Bootstrap examples

我正在尝试使用 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>

but of course this CSS doesn't style my buttons as I want to...
The functionality I'd like to achieve is to have 5 buttons, horizontally justified, responsive (square-shaped in all browser sizes) and to act like a radio-buttons group.

但当然这个 CSS 并没有像我想要的那样设计我的按钮......
我想要实现的功能是有 5 个按钮，水平对齐，响应式（在所有浏览器尺寸中都是方形的）并且表现得像一个单选按钮组。

回答by Bass Jobsen

html

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

css

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

will looks like:

看起来像：

If I apply btn-group-justified class instead of just btn-group, they became justified but still not square-shaped, nor they have margin between them

如果我应用 btn-group-justified class 而不是 btn-group，它们变得合理但仍然不是方形，它们之间也没有边距

I don't think the btn-group-justifiedclass will be intent to use without the btn-group. Although it don't seems to make a difference when you don't use btn-group.

我认为btn-group-justified没有btn-group. 尽管当您不使用btn-group.

btn-group-justifiedset the display to table. To add a margin between two cell you will need border-spacingin stead of margin(see: Why is a div with "display: table-cell;" not affected by margin?)

btn-group-justified将显示设置为表格。要在两个单元格之间添加边距，您将需要border-spacing代替margin（请参阅：为什么带有“显示：表格单元格；”的 div 不受边距影响？）

now you have html:

现在你有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:

css:

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

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

Which will look like:

看起来像：

Note you have rectangles instead of squares. btn-group-justifiedset the total with of the group to 100% of it's parent. To make squares you will need jQuery to set the height based on the (inner)width of your buttons. (see: CSS scale height to match width - possibly with a formfactor)

请注意，您使用的是矩形而不是正方形。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()); });