web-dev-qa-db-ja.com

ボタンを全角にする？

ボタンが列の幅いっぱいに収まるようにしたいのですが、問題があります...

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

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

csstwitter-bootstraphtmlresponsive-design
252
user1438003

ブートストラップv3とv4

ボタン/要素にbtn-blockクラスを使う

ブートストラップv2

ボタン/要素にinput-block-levelクラスを使う

774
Layke

なぜ、仕事をするBootstrapの定義済みクラスinput-block-levelを使わないのですか？ 

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

詳細については コントロールのサイズ設定^ セクションをご覧ください。

38
CodeAngry

私は単にこれを使った：

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
19
syn

つかいます

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

しかし<a>要素に対してのみ機能し、<button>要素には機能しません。

参照してください： http://getbootstrap.com/components/#btn-groups-justified

12
noel

これらのスタイルを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％確信していません、しかし私はこれがあなたを親密にすると思います。

8
Kenny Bania

ブートストラップ4 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             Full Width Button
         </button>
     </div>
</div>
6
WasiF

私はこれが物事を行うための最もブートストラップ風の方法だと思いました：

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

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

6
Starkers
<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

ブートストラップ3では、これで十分です。 btn-largeがbtn-blockの幅を上書きしていたと思います。

5
kim3er

ボタンの幅はボタンのテキストで定義されます。そのため、ボタンの幅を定義したい場合は、CSSでピクセルを使用して定義された幅を使用するか、または応答的にパーセント値を使用したい場合は、定義済みの幅を使用できます。

1
skoepp