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

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

我想用无线电输入字段(http://getbootstrap.com/javascript/#buttons-examples)设置原始Bootstrap的btn-group-justified样式。

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>

更多相关文章

随机推荐