[解決済み] 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コンパイラでこれらの変数を設定することができることを指摘しています。
関連
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み] Twitter Bootstrap 3:メディアクエリを使うには?
-
[解決済み] Bootstrap 3.0 - 固定カラムサイズを含む流動的なグリッド
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について
-
[解決済み] Twitter Bootstrap 3.0 どのように私は今 "バッジバッジ重要 "するのですか?
-
[解決済み] Bootstrap 4: ドロップダウンメニューが画面の右側にずれていく
-
[解決済み] 行を組み合わせたブートストラップ(rowspan)
-
[解決済み] Bootstrapがline-heightプロパティを1.428571429に設定する理由は何ですか?
-
[解決済み] Twitter Bootstrap でテーブルのテキストを中央揃えにする
-
[解決済み] Bootstrap 4 datapicker.jsが含まれていません [閉鎖].
-
[解決済み] bootstrap 4 responsive utilities visible / hidden xs sm lg not working.
-
[解決済み] Twitter Bootstrapの名前空間を利用してスタイルが衝突しないようにする方法
-
[解決済み] BootstrapでScrollSpyのオフセットを設定するにはどうすればよいですか?