Twitter Bootstrap でフッターを一番下にフラッシュするにはどうすればよいですか?

Twitter Bootstrap でのフッターのフラッシュ

フッターをページの下部にフラッシュすることは、Web デザインにおける一般的なタスクです。ただし、Twitter Bootstrap のような応答性の高いフレームワークを使用している場合、これを達成するのは困難になる可能性があります。

問題を理解する

Bootstrap の応答性の性質は、多くの場合依存する従来のフッター フラッシュ メソッドを妨げる可能性があります。固定の高さまたは下マージンに。その結果、異なる画面サイズではフッターが常にページの下部に表示されるとは限りません。

Bootstrap 2.2.1 以降の問題の解決

Bootstrap navbar コンポーネントと呼ばれるフッター フラッシュ用の組み込みソリューションが含まれるようになりました。これを使用するには、「.navbar-fixed-bottom」クラスをナビゲーションバーに追加するだけです:

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 3.x および 4.x

の場合ブートストラップ 3.x と 4.x には、同じアプローチが適用されます。 「.fixed-bottom」クラスの navbar コンポーネントを使用します:

<div class="navbar fixed-bottom"></div>

ページのコンテンツが覆われないようにするには、必ず次の CSS ルールを追加してください:

body {
  padding-bottom: 70px;
}

結論

これらのメソッドは、フッターをページの下部にフラッシュする効果的な方法を提供します。ブートストラップ。組み込みのナビゲーションバー コンポーネントを利用することで、応答性が高く一貫性のあるフッター レイアウトを作成できます。

以上がTwitter Bootstrap でフッターを一番下にフラッシュするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。