web-dev-qa-db-ja.com

Bootstrap 3 btn-group width

別のBootstrap=関連する問題があります。フォームにラジオとチェックボックスを追加したいのですが、フォーム要素の幅を100％にしたいです。

これとしてボタングループを追加しました。

<div class="form-group">
    <label class="col-sm-3 control-label">Subscribe</label>
    <div class="col-sm-9">
        <div class="btn-group input-group" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option1" />Yes</label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" />Maybe</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" />No</label>
        </div>
    </div>
</div>

これにより、素敵なラジオのようなボタンが得られます。

しかし、ご覧のとおり、幅は固定されています。これはbootstrap classes？で修正できますか？もう一度ここに私のサンプルコードがあります： http://jsfiddle.net/Misiu/yy5HZ/5/

csscss3twitter-bootstraptwitter-bootstrap-3
23
Misiu

組み込みの.btn-group-justifiedクラスを使用します。 Offical Docs

親の幅全体に広がるように、ボタンのグループを同じサイズで引き伸ばします。ボタングループ内のボタンドロップダウンでも動作します。

アンカー：

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> 
    <a href="#" class="btn btn-default" role="button">Left</a>
    <a href="#" class="btn btn-default" role="button">Middle</a>
    <a href="#" class="btn btn-default" role="button">Right</a> 
</div>

ボタン：

<button>要素で両端揃えのボタングループを使用するには、ラップする必要がありますボタングループ内の各ボタン。ほとんどのブラウザは<button>要素に正当化するためにCSSを適切に適用しませんが、ボタンのドロップダウンをサポートしているため、それを回避できます。

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

JSFiddle

71
Schmalzy

bootstrap col-nクラスを使用できます。2つのボタンがある場合は、col-xs-6 それらの上に。問題は、たとえば5つのボタンがある場合です。 bootstrap=グリッドシステムにはそのためのクラスはありません。したがって、次のいずれかを使用します。

ボタンの数が異なるグループを区別するには、追加のカスタムクラスを使用します。

JSFiddle

CSS

.btn-group {
    width: 100%;
}
.btn-group-2 label.btn  {
    width: 50%;
}
.btn-group-3 label.btn  {
    width: 33.3%;
}

HTML

<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="radio" name="options" id="option1" />Yes</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" />Maybe</label>
    <label class="btn btn-danger">
        <input type="radio" name="options" id="option3" />No</label>
</div>

これらのcssクラスを避けたい場合は、jQueryのみを使用できます。

JSFiddle

$('.btn-group').each(function(index, item) {
    $(item).find('.btn').css(
        'width', 100 / $(item).find('.btn').length + '%'
    )
});
4
Markus Kottländer

別の解決策：

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > button {
    width: 100%;
}
1
Feeco

Boostrap 4の場合、ドキュメントでは次のことができると書かれています。

.btn-group-justifiedを削除しました。代わりに、<div class="btn-group d-flex" role="group"></div>を持つ要素のラッパーとして.w-100を使用できます。

1
max kaplan

独自のクラスを追加して、33％の幅（3つのボタンの場合）または50％の幅（2つのボタンの場合）を指定できます。

0
Valerie

@Schmalzyのソリューションが機能しない場合は、Bootstrap v3.0.0を使用している可能性があります。この場合、@ Schmalzyのソリューションのhtmlマークアップに加えて、次のスタイルを追加します。

.btn-group-justified > .btn-group .btn {
    width: 100%;
}

.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}
0
ZerosAndOnes