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

Question

我想btn-group-justified用无线电input字段设置原始Bootstrap的样式(http://getbootstrap.com/javascript/#buttons-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>

但是当然这个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(请参阅:为什么div为"display:table-cell;"不受保证金影响？)

现在你有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比例高度以匹配宽度 - 可能与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()); });