bootstrapスタイルを参照するときに発生する競合の問題を解決

2345 ワード

1.bootdtrap.cssで発生したスタイル競合の問題:
htmlは上から下へレンダリングされるので、後ろのスタイルは前のスタイルを上書きします.
だから、cssスタイルがbootstrapのスタイルを上書きできない場合は、自分のスタイルの導入がbootstrapの導入の前に置かれているかどうかを確認します.
正しいのは自分のスタイルをbootstrapの導入の後ろに導入することです.
例:
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="mine.css"> // 

2、bootstrapの応答を無効にする方法:
PC側webはBootstrapを使って開発しようとしていますが、Bootstrapの応答式効果を消したいと思っています.
1.ラベルを削除応答レイアウトを無効にする最初のステップは、headラベルに追加されたmetaラベルを削除することです.以下に示します.
 name="viewport" content="width=device-width, initial-scale=1.0”>

このラベルについて簡単に説明します.このラベルの役割は、あなたのサイトがモバイルデバイス側にアクセスするときに、スケールを行わずに100%の割合でモバイルデバイスに表示されるようにすることです.
2.containerクラスの幅を無効にする第2のステップは.containerクラスは1つの幅を設定して、それによってそれが設備の幅によって自動的に調節する機能をカバーして、ネット上で見つけたチュートリアルは一般的にcontainerクラスに対して1つの幅だけを設定して、ここで私達はcontainerに1つの最大の幅をnoneに設定して、しかもすべて!importantは、次のように元のBootstrapスタイルを上書きできることを保証します.
.container { 
width: 1200px !important;
 max-width: none !important;
}
3.折りたたみメニューを削除ナビゲーションバーを使用している場合は、移動端でのメニューの折りたたみ様展開式を削除することに注意してください(主にbuttonのnavbar-toggleで実現されます).4.フェンスレイアウトそれ以外に、グリッドレイアウトを採用する場合は、採用する.col-xs-(最小デバイスグリッドクラス)のスタイルに置き換える.col-md-および.col-lg-*は、グリッドがすべてのデバイスで展開されることを保証します.
転載先:https://www.cnblogs.com/wolflower/p/9401458.html