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

Bootstrap 3 2 列フルハイト: 総合ガイド

はじめに
Bootstrap 3 でフルハイトの列レイアウトを実現するには、次の手順を実行します。ネイティブ クラスはこの機能をサポートしていないため、これは課題です。この記事では、カスタム CSS を利用して 1:3 の比率で全高の列を作成し、両方の列がビューポートの全高を拡張するレイアウトのニーズを満たすソリューションを検討します。

HTML マークアップ
このレイアウトの HTML 構造は、ヘッダー、コンテナー、行、および 2 つの行で構成されます。

<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 スタイル
全高の列を実現するために、display: table; を利用するカスタム CSS を組み込みます。プロパティを使用して CSS テーブルを作成し、両方の列がビューポートの高さ全体に広がるようにします。

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

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

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

説明
CSS スタイルは次を定義します:

• html、body、および .container は高さ: 100% に設定されます。コンテンツがビューポート全体に表示されるようにするため。
• .container は、display: table; で構成されます。 CSS テーブルを作成します。
• .row は、CSS テーブル内に行を作成するために、表示プロパティを table-row に設定します。
• .row .no-float は、display: table-cell を設定します。列を行内の表のセルのように動作させます。
• float: none は、ブートストラップのデフォルトの浮動動作を上書きします。 columns.

カスタマイズ

• .container の margin-top 値を編集して、ヘッダーの上マージンを調整します。
• 変更.container のパディング値を使用して、コンテナの左右の間隔を設定します。
• 列からcol-md-* クラスを削除して、すべての画面幅にわたって固定の 1:3 比率を作成します。

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