ブートストラップ3からブレークポイントを削除する

Question

推奨の_custom-variables.scssメソッドで基本的なカスタマイズを適用し、ブートストラップ3をフレームワークとして使用しているWebアプリケーションを継承しました。公式のSASSポートは、依存関係として追加され、@import "bootstrap";を使用してと_custom-mixins.scssの後にapp.scssファイルに含まれています。

流体の幅のアプリケーションは小さな画面では表示されないため（データ量が膨大なため）、CSSから-xs-と-sm-のブレークポイントを無効にするか削除します。レイアウトは-lg-と-md-ブレークポイントに最適化され、最も狭いブレークポイントは-md-です。

// Small screen/tablet 
$container-tablet:    (720px + $grid-gutter-width) !default; 
//** For `$screen-sm-min` and up. 
$container-sm:     $container-tablet !default; 

// Medium screen/desktop 
$container-desktop:   (940px + $grid-gutter-width) !default; 
//** For `$screen-md-min` and up. 
$container-md:     $container-desktop !default; 

に：私はまた、全体のレイアウトを包む親<div>にmin-width: $container-md;設定

// Small screen/tablet 
$container-tablet:    (940px + $grid-gutter-width) !default; 
//** For `$screen-sm-min` and up. 
$container-sm:     $container-tablet !default; 

// Medium screen/desktop 
$container-desktop:   (940px + $grid-gutter-width) !default; 
//** For `$screen-md-min` and up. 
$container-md:     $container-desktop !default; 

は_custom-variables.scssで、Iから$container-tablet幅を変更しました。

これは、HTML要素に不要なブレークポイントのクラスを含める限り機能します。

<div class="col-xs-3 col-sm-3 col-md-3">

より小さなブレークポイントクラスを省略がwidth性を除去し、100％の幅に<div>デフォルトブラウザは992pxの下収縮（min-width：例えば以下は、25％の列の幅を維持しますブレークポイントの-md-の値）。

私の質問：

1. は、なぜ私は私のコンテナに追加小さいブレークポイントクラスを指定する必要がありますか？ （私のブートストラップスキルは錆びています！）
2. 2つの小さなブレークポイントを削除/無効にする良い方法はありますか？

Answer 1

containerの幅を変更するだけで、より小さなブレークポイントクラスを指定する必要があります。

てみ自体がブレークポイントに変更します

@screen-md:     1px; 
@screen-md-min:    @screen-md; 

をそして、あなたは手動でcontainer分間幅を指定する必要があります

@media (min-width: 1px) { 
    .container { 
    width: 970px; 
    } 
} 

CODEPEN

Answer 2

を見て、私は私が必要な各ブートストラップ部分を参照したとして、個別にapp.scssで、私はブートストラップのテーマを設定するときに独自の変数を適用する方法と同様のアプローチを取った。

1. 私はbootstrap/grid.scssのコピーを作成し、app.scssでbootstrap/custom-grid.scss
2. それを名付け、私は次の行削除bootstrap/custom-grid.scssインサイドbootstrap/custom-grid.scss
3. を参照してbootstrap/grid.scssへの参照をスワップアウト：

を

...

@media (min-width: $screen-sm-min) { 
    width: $container-sm; 
} 

@include make-grid(xs); 


@media (min-width: $screen-sm-min) { 
    @include make-grid(sm); 
} 

@media (min-width: $screen-md-min) { 
    @include make-grid(md); 
}