twitter-bootstrap-3 - Bootstrap - col-xs-12 をカスタムの最小ブラウザ ウィンドウ幅に強制するにはどうすればよいですか?

Question

2 つの列を持つ Bootstrap 行がいくつかあります。このようなもの：

<div class="row">
  <div class="col-xs-12 col-sm-6">...</div>
  <div class="col-xs-12 col-sm-6">...</div>
</div>

ウィンドウ幅<= 720pxで列に「col-xs-12」を実行させたいと思います。

これはどのように達成できますか？

Answer 1

デフォルトの動作は、col-xs-number画面が 768px に達するまで、最小幅の画面でクラスが動作することです。画面が 768px を超えると、col-sm-numberクラスに移動します。

したがって、xs を 720px までの画面用にし、sm を 720px からデフォルトの 992px ( col-md-numberclass が来る場所) にしたい場合は、Bootstrap の css ファイルに移動し、すべてのクラス@media (min-width: 768px) {}のコンテンツを編集する必要があります。col-sm-number

最新の Bootstrap バージョン (v3.3.5) の例を次に示します。bootstrap.css ファイルを開くと、これは行番号 1778 から始まり、行番号 1936 まで続きます。

@media (min-width: 720px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
    .col-sm-12 {
         width: 100%;
    }
    .col-sm-11 {
         width: 91.66666667%;
    }
    .col-sm-10 {
         width: 83.33333333%;
    }
 ...
}