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

Bootstrap 3 2 列のフルハイトの最適化

Bootstrap 3 では、2 列のフルハイトのレイアウトを作成するのは困難な場合があります。ネイティブ クラスは、そのままではこれをサポートしません。ただし、カスタム 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;
}

この CSS は、CSS テーブルを利用してフルハイトの列を作成します。 「.no-float」クラスは、Bootstrap の float ベースのレイアウトによる列の折りたたみを防ぎます。

追加の考慮事項:

• 1:3 を維持するには中程度の画面幅以上の場合は、「.col-md-3」および「.col-md-9」を使用します。
• すべての画面幅でこの比率が必要な場合は、不適切な使用を避けるためにブートストラップ列クラスを削除することを検討してください。
• 小さい画面では、デフォルトで通常のブートストラップ列の動作が設定され、各列がすべての幅を占めるようになります。幅。

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