ブートストラップ適応をキャンセルする方法

ブートストラップ適応をキャンセルする方法: 1. ヘッダー「」を削除します。 2. コンテナーを設定します。幅は十分です。

このチュートリアルの動作環境: Windows10 システム、bootstrap3.0 この記事は、すべてのブランドのコンピューターに適用されます。

推奨: 「ブートストラップ ビデオ チュートリアル」

ブートストラップ応答ソリューションを無効にする

数日前にタスクを受け取りました。ブートストラップ フレームワークを使用して、いくつかの静的ページを作成しました。長い間バックエンドの開発に集中していたので、最終的にページを完成させるまでに 3 日かかりました。プロセス中に、いくつかの変更を行ったり来たりし、問題について話し合いました遭遇しました。

ブートストラップを使用してページを作成した後、チーム リーダーは再び考えを変え、ブートストラップを使用すべきではないか、ブートストラップの応答性を無効にする必要があると言いました。応答性を無効にする以外の方法では時間がかかります。最短の方法はブートストラップの公式 Web サイトにアクセスします。応答性を無効にしたい場合は、まずヘッダー 。 2 番目: .container 幅を次のように設定します。

container{
width: 1170px;
max-width: none !important;
}

3 番目: .col-xs- (最小デバイス グリッド クラス) スタイルを使用して、.col-md- と .col-lg-* を置き換えます。

しかし、問題は現時点で終わったわけではありません。

ここでコンテナに固定幅を与えます。背景が白いナビゲーション バーの幅はブラウザ全体をカバーできます。ただし、画面が小さくなると、ナビゲーション バーの白い背景はブラウザ全体の幅をカバーできなくなります。小さくなった後のブラウザ！また、カルーセル画像もブラウザの幅いっぱいに表示する必要があり、現在は中央に表示されています。それを知っていればブートストラップは必要ないのにと思いました。今ページを書き直す必要がありますか? ?ネットで調べましたが解決策が見つかりませんでした。後から思いつきました。本文に幅を持たせることも、ナビゲーションバーとカルーセルも同じ幅に設定することもできます。今回の問題は、どの幅に設定すればよいかです。 ? ?わかった、そんなことはできない！

最後に、Firefox でコードをデバッグしていたときに、@media という素晴らしいものを偶然発見しました。しかし、自分で設定したのですが、ブラウザ上で応答しませんでした。私は言葉を失いました。最後まで時間がかかりましたが、このスタイルが正しく書かれていないことがわかりました。

つまり、ナビゲーション バーとカルーセルの応答性の問題を解決する 4 番目のポイントは次のとおりです。

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

つまり、画面が 1400px 未満の場合は、本文の幅を 1400px に設定するということです。知らない読者はオンラインで学ぶことができるので、これは良いことです。

最後に、top は、position が絶対位置である場合の top を指します。 scan の幅と高さを設定しても効果はありません。これはブロック レベルの要素ではなく、div はブロック レベルの要素で、span はインライン要素です。スパンを使用して下の図のボタンを実装する場合は、必要に応じてパディングを設定するだけで済みます。 (パディング: 20px 20px など)

私はフロントエンドの人間ではないので、これらのスタイルにはあま​​り詳しくありません。気に入らない場合はスプレーしないでください。

以上がブートストラップ適応をキャンセルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。