ブートストラップボタンフルサイズの画面サイズが小さい場合

Question

小さな画面の場合は、ブートストラップボタンをフルスクリーン幅（ほぼ、ほぼ）にしたいです。 btn-blockは、ボタンを延長させますが、すべてのタイプの画面に適用されます。

このbtn-blockは、CSSを使用してカスタマイズすることができます（たとえば、@mediaを使用）。これは、小さな画面でのみ有効にすることができますか？それともそれ以外の方法がありますか？

私のHTMLボタンのコード行が下に記載されている：

<button type="submit" class="btn btn-lg btn-success"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning"> 
    Reset 
</button> 

おかげ

AB

Answer 1

は残念ながらありませんフォームコントロールクラスを追加します。 thを適用するブートストラップの 'クラス' '効果'です。あなたができる唯一のことは、CSSで@mediaを使用することです。あなたはそれを使用することができます。

@media (max-width: 768px) { 
    .btn, .btn-group { 
     width:100%; 
    } 
} 

あなたはボタンの「COL」クラスのいずれかを適用することができますが、ボタンの「箱」はそのコンテンツのサイズに従わないであろう。

私はそれがあなたを助けることを願っています。 :)

Answer 2

は

<button type="submit" class="btn btn-lg btn-success form-control"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning form-control"> 
    Reset 
</button> 

Answer 3

はこの新しいCSSクラスを作成します。

@media(max-width: 768px) { 
    button.full-width { 
     width: 100%; 
    } 
} 

してから、ボタンに適用します：Claudio Bが示唆されているように私の意見で

<button type="submit" class="btn btn-lg btn-success full-width"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning full-width"> 
    Reset 
</button> 

を、それがブートストラップクラスを編集するよりも良いアイデアです。