74

btn-groupBootstrapを使用していますが、全体の幅を親要素の100％に設定したいと思います。内側のボタンも同じ幅にしたいのですが。そのままでは、どちらも達成できません。

ここでJSFiddleを作成しました：http：//jsfiddle.net/BcQZR/12/

HTMLは次のとおりです。

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

そして、これが私の現在のCSSですが、機能しません。

#colours { 
  width: 100%;
}
4

10 に答える 10

42

.btn-group-justifiedクラスがこれを行う追加の css は必要ありません。

これを親要素に追加してから、各 btn 要素を .btn-group を使用して div でラップする必要があります。

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>
于 2014-05-10T15:14:11.090 に答える
23

ブートストラップ 2 (ソース)

問題は、ボタンに幅が設定されていないことです。これを試して：

.btn {width:20%;}

編集：

デフォルトでは、ボタンはテキストの長さといくらかのパディングの自動幅を取るので、あなたの例では、5 つのボタンの場合はおそらく 14.5% のようになると思います (パディングを補うため)。

ノート：

パディングを試して補正したくない場合は、使用できますbox-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

于 2013-01-07T22:26:46.057 に答える
12

.btn-group には常に同じ数のアイテムがあると想定しているため、.btn の幅を設定するソリューションは好きではありません。これは誤った仮定であり、肥大化したプレゼンテーション固有の CSS につながります。

より良い解決策は、.btn-block を含む .btn-group と子の .btn(s) の表示方法を変更することです。これがあなたが探しているものだと思います：

.btn-group.btn-block {
    display: table;
}
.btn-group.btn-block > .btn {
    display: table-cell;
}

ここにフィドルがあります：http://jsfiddle.net/DEwX8/123/

(合理的な範囲内で)等幅のボタンを使用したい場合、およびフレックスボックスをサポートするブラウザのみをサポートできる場合は、代わりにこれを試してください。

.btn-group.btn-block {
    display: flex;
}
.btn-group.btn-block > .btn {
    flex: 1;
}

ここにフィドルがあります：http://jsfiddle.net/DEwX8/124/

于 2014-02-18T09:16:06.730 に答える
2

Angular - 等幅のボタン グループ

スコープに「もの」の配列があると仮定します...

  • 親 div の幅が 100% であることを確認してください。
  • ng-repeatを使用して、ボタン グループ内にボタンを作成します。
  • ng-styleを使用して、各ボタンの幅を計算します。
<div class="btn-group"
     style="width: 100%;">
    <button ng-repeat="thing in things"
            class="btn btn-default"
            ng-style="{width: (100/things.length)+'%'}">
        {{thing}}
    </button>
</div>
于 2016-06-02T22:57:46.550 に答える
0 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" class="btn btn-default btn-xs  btn-block  dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>

于 2016-07-21T07:38:08.723 に答える