ボタンを全幅にしますか？

列の幅いっぱいにボタンを配置したいのですが、問題があります...

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

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

ブートストラップv3およびv4

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

ブートストラップv2

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

input-block-level仕事をするBootstrap事前定義クラスを使用しないのはなぜですか？

<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>

詳細については、「コントロールのサイズ変更」セクションをご覧ください。

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

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

ブートストラップ4.1以降

使用col-12、btn-block、w-100またはform-control

<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">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>

使用する

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

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

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

これらのスタイルを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％わかりませんが、これはあなたに近づくと思います。

これが最もブートストラップ風の方法であると思いました。

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

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

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

Bootstrap 3では、これで十分です。btn-largeの幅を上書きしていたと思いますbtn-block。

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