[解決済み】LESSを使わずにbootstrap navbar collapse breakpointを変更する。
2022-04-06 14:16:34
質問
現在、ブラウザの幅が768pxを下回ると、ナビバーが折りたたみモードに変更されます。この幅を1000pxに変更し、ブラウザの幅が1000px以下になるとナビバーが折りたたみモードに変わるようにしたいのです。私はLESSではなく、スタイラスを使っています。
私の問題は、この質問と同じです。 Bootstrap 3 ナンバーバーの折りたたみ
しかし、その質問のすべての回答は、LESSの変数を変更することによってそれを行う方法を説明しています。私はLESSを扱ったことがなく、スタイラスを使っているので、スタイラスや他の方法でどのようにこれを行うことができるかを知りたいのです。
ありがとうございます。
解決方法は?
を記述する必要があります。 メディアクエリ の場合、768px以下ではナビバーが崩れるので、768px以上、1000px以下に適用する、ただそれだけのことです。
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
これは、ブートストラップ・ユニットのデフォルトの発生まで、ナバー・コラプスを隠します。折りたたみクラスが反転すると、ナバー折りたたみ内のインナーアセットが自動的に非表示になります。
関連
-
[解決済み] <div style="display:none">によるテーブルデータの非表示。
-
[解決済み] CSSでボックスの下枠を削除する方法
-
[解決済み] Railsです。railsでcssから背景画像を設定する方法は?
-
[解決済み] ボーダーの太さをパーセントで設定するには?
-
[解決済み] このベベルボタンをCSSで実現するには?
-
[解決済み] モバイル端末でCSSを使用したフルハイトの背景画像
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】DIVの幅が100%というのは本当の100%ではない
-
[解決済み] <div style="display:none">によるテーブルデータの非表示。
-
[解決済み] CSS無効なプロパティ値?
-
[解決済み] CSSやSVGで半円を描く
-
[解決済み] ネストしたdivのcssを簡素化
-
[解決済み] エレメントの角を面取りする方法を教えてください。
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] Atomエディタで透明な背景を設定する方法は?
-
[解決済み] codepenでfont awesomeを使用する
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて