313

列幅いっぱいにボタンを配置したいのですが、なかなか難しい...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

ボタンを列と同じ幅にするにはどうすればよいですか?

4

14 に答える 14

881

ブートストラップ v3 & v4

btn-blockボタン/要素でクラスを使用する

ブートストラップ v2

input-block-levelボタン/要素でクラスを使用する

于 2013-11-04T21:43:20.423 に答える
30

私は単にこれを使用しました：

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
于 2014-06-23T05:50:09.990 に答える
12

使用する

<div class="btn-group btn-group-justified">
  ...
</div>

<a> 要素でのみ機能し、 <button> 要素では機能しません。

参照: http://getbootstrap.com/components/#btn-groups-justified

于 2013-12-13T14:05:22.323 に答える
10

これらのスタイルをCSSシートに追加する必要があります

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

次に、コードにクラスを追加するように変更します

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

私はこれをテストしておらず、あなたが何を望んでいるかは100％わかりませんが、これであなたは近づくと思います。

于 2012-08-21T19:14:18.097 に答える
6

私はこれが最もブートストラップ風のやり方だと思っていたでしょう：

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

col-xs-12ボタンにクラスを追加するだけです。

于 2014-04-03T13:26:46.320 に答える
0

ボタンの幅は、ボタンのテキストによって定義されます。したがって、ボタンの幅を定義する場合は、cssでピクセルを使用して定義された幅を使用できます。または、レスポンシブで使用する場合は、パーセンテージ値を使用します。

于 2012-08-24T10:55:59.070 に答える