Bootstrap 3 でフルハイトの 2 列レイアウトを作成するにはどうすればよいですか?

Bootstrap 3 でのフルハイトの 2 列レイアウトの実現

Bootstrap 3 には、フルハイトの列レイアウトのネイティブ サポートがありません。ただし、カスタム CSS を採用し、CSS テーブルを活用することで、この機能を複製できます。

マークアップ

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

関連CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

説明

このコードは、中程度の画面幅以上で全高の列と 1:3 の比率 (ナビゲーション:コンテンツ) を実現します。 。カスタム CSS クラス (no-float) は、列がフローティングになるのを防ぎ、列が表のセルとして表示されるようにするために利用されます。

考慮事項

• ブートストラップのネイティブ列クラス (col-md-3、col-md-9) は応答性のために使用されます。
• 小規模の場合画面 (中以下) では、列はデフォルトのブートストラップ動作 (各列が 100% の幅を占める) に戻ります。
• すべての画面幅で 1:3 の比率が必要な場合は、ブートストラップの列クラスをマークアップから削除できます。 .

以上がBootstrap 3 でフルハイトの 2 列レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。