Twitter Bootstrap でレスポンシブなフッターの配置を実現するにはどうすればよいですか?

Twitter Bootstrap によるレスポンシブ フッターの配置

この記事では、フッターを下部に配置しようとするユーザーが直面する問題について検討します。人気のレスポンシブ ツールである Twitter Bootstrap のコンテキストで CSS テクニックを使用したページ

この問題は、Twitter Bootstrap がレスポンシブ デザインを採用しているため、従来の CSS メソッドを使用して望ましいフッターの配置を実現することが困難であるために発生します。これに対処するために、考えられる解決策を調べてみましょう。

Bootstrap 2.2.1 以降

Bootstrap 2.2.1 以降では、この機能がネイティブにサポートされるようになりました。

ブートストラップ3.x

Bootstrap 3.x では、navbar コンポーネントと .navbar-fixed-bottom クラスを使用します:

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

Bootstrap 4.x

Bootstrap 4.x の場合は、次を使用しますコード:

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

追加メモ

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

body { padding-bottom: 70px; }

さらに詳しいドキュメントについては、Bootstrap の公式 Web サイトを参照してください。 http://getbootstrap.com/components/#navbar-fixed-bottom

以上がTwitter Bootstrap でレスポンシブなフッターの配置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。