web-dev-qa-db-ja.com

モバイル画面サイズのボタンを「btn-block」に変更します

Bootstrap 3を使用すると、「xs」画面サイズのときにボタンにbtn-blockクラスを使用させる方法はありますか？

現在、3つのドロップダウンと2つのボタンを含むいくつかの行があるフォームがあります。これは、大画面および中画面で見た目がきれいです。

フォームが小さな画面で変更され、フォームコントロールが垂直方向に流れるように強制されると、ボタンは同じサイズのままで、画面の左側に押し込まれたようにふくらみます。

理想的には、小さい画面サイズのときにそれらをブロックボタンとして使用できるようにしたいので、フォームコントロールのようにフォームの全幅を占有し、少し見栄えを良くします。

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
24
Mr Pablo

ボタンにカスタムクラスを追加し、メディアクエリを使用して、ブレークポイントまでのデバイスで幅を100％に設定します。 SOすなわち

<button class"bootstrap classes custom-class></button>

およびCSS

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}

また、異なるブレークポイントでメディアクエリを設定することにより、このブレークポイントの上で何が起こっているかを制御することもできます。

33
robjez

以下に示すCSSをBootstrapアプリケーションに追加すると、

.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block

btn-blockのバリエーションを提供するクラス。これらは応答性が高く、ビューポートのサイズに固有です。

複数のボタンが並んでいて、小さな画面に収まらないために壊れて別の行に折り返す場合は、btn-xs-blockまたはbtn-sm-block（またはまれに他の行クラス）をボタンに追加すると、全画面表示になり、小さな画面に積み重ねられます：

<button class="btn btn-default btn-xs-block" type="button">Button 1</button>
<button class="btn btn-default btn-xs-block" type="button">Button 2</button>

Bootstrap 3：のCSS

@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block + .btn-sm-block,
    .btn-sm-block + .btn-block,
    .btn-sm-block + .btn-sm-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block + .btn-md-block,
    .btn-md-block + .btn-block,
    .btn-md-block + .btn-md-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block + .btn-lg-block,
    .btn-lg-block + .btn-block,
    .btn-lg-block + .btn-lg-block {
        margin-top: 0.5rem;
    }
}
17
caw

Bootstrap 4の場合、これを使用します。

# HTML
<input type="submit" class="btn btn-primary btn-block-xs-only">

# SCSS
@include media-breakpoint-only(xs) {
  .btn-block-xs-only {
    display: block;
    width: 100%;
  }
}

参照用にここを参照してください- http://v4-alpha.getbootstrap.com/layout/overview/

15
Victor

「ネイティブ」だけを使用したい場合は、bootstrap=クラスを使用できます。

<input type="submit" 
    class="btn btn-primary 
        visible-xs-block 
        visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
2
Silvio Porcellana

ボタンをグリッドに配置することもできるため、追加のCSSを記述する必要はありません。

    <div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>
1
ethmz

これは、Bootstrap 4の場合に思いついた解決策です。ボタンを中央に置きたいのは、コンテナを埋めたいモバイル解像度の場合を除きます。

これには、最小サイズd-noneが、小さいサイズ以上で表示d-sm-blockそれから、大きいサイズ以上に広いサイズを設定して、ボタンがすべてのサイズで適切な幅のままになるようにします。

<div class="row">
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
   <div class="col-md text-center">
      <button type="submit" class="btn btn-primary btn-block">Register</button>
   </div>
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
</div>
0
Robin Wilson

Bootstrap 4.3では、組み込みクラスを使用できます。モバイル：Display Blockデスクトップ：Display Inlineブロック

<a href="#button1" class="btn d-block d-md-inline-block">Button 1</a>
<a href="#button1" class="btn d-block d-md-inline-block">Button 2</a>
0
Brett