15

btn-group-justifiedオリジナルの Bootstrapを無線inputフィールドでスタイルしたいと思います ( 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 つのボタンを水平方向に揃え、レスポンシブ (すべてのブラウザー サイズで正方形) にし、ラジオボタングループ。

4

1 に答える 1

27

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 の代わりに btn-group-justified クラスを適用すると、それらは正当化されますが、それでも正方形ではなく、それらの間にマージンもありません

私は、btn-group-justifiedクラスがなしで使用する意図があるとは思わないbtn-group. 使わなくても変わらないように見えますがbtn-group。

btn-group-justifiedディスプレイをテーブルに設定します。border-spacing2 つのセルの間にマージンを追加するには、代わりに必要になりますmargin(参照: Why is a div with "display: table-cell;" not impacted 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 - おそらく 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()); });
于 2013-10-02T21:00:16.457 に答える