1. ホーム
  2. twitter-bootstrap

[解決済み] Twitter Bootstrap 3でレスポンシブ機能を削除する方法とは?

2023-06-19 02:23:19

質問

Bootstrap 3から、レスポンシブスタイルシートと標準スタイルシートの別々のファイルがなくなりました。そこで、どのようにすれば簡単にレスポンシブ機能を削除できるでしょうか?

どのように解決するのですか?

デスクトップ以外のスタイルを無効にするには、variables.less ファイル内の 4 行のコードを変更するだけです。variables.lessファイルに画面幅のブレークポイントを以下のように設定します。

// メディアクエリのブレークポイント
// --------------------------------------------------

// 超小型スクリーン/携帯電話
// 注意: v3.0.1 で @screen-xs と @screen-phone が非推奨になりました。
@screen-xs: 1px;
@screen-xs-min:              スクリーン-xs;
screen-phone:               screen-xs-min: @screen-xs-min;

// スモールスクリーン/タブレット
// 注意: v3.0.1 で @screen-sm と @screen-tablet は非推奨になりました。
screen-sm: 2px;
screen-sm-min:              screen-sm: 2px; @screen-sm-min: 2px; @screen-sm: 2px
@screen-tablet:              screen-sm-min: @screen-sm

// 中画面/デスクトップ
// 注意: v3.0.1 で @screen-md と @screen-desktop は非推奨になりました。
スクリーン-md:                  3px;
スクリーン-md-min:              スクリーン-md;
screen-desktop: @screen-md-min; @screen-desktop: @screen-md-min             screen-md-min: @screen-md-min;

// ラージスクリーン / ワイドデスクトップ
// 注意: v3.0.1 で @screen-lg と @screen-lg-desktop は非推奨になりました。
@screen-lg:                  9999px;
screen-lg-min:              screen-lg;
screen-lg-desktop: @screen-lg-min; @screen-lg-desktop: @screen-lg-min          screen-lg-min: @screen-lg-min;

これは、デスクトップスタイルのメディアクエリのmin-widthを低く設定して、すべての画面幅に適用されるようにするものです。2calledchaos さんの改良に感謝します! いくつかのベーススタイルはモバイルスタイルで定義されているので、それらを必ず含める必要があります。

編集: chrisは、bootstrapサイトのオンラインのlessコンパイラでこれらの変数を設定することができることを指摘しています。