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

ブートストラップ 3 フルハイト 2 列レイアウト

問題:

2 列の作成-Bootstrap 3 のフルハイトの列レイアウトは、この特定のレイアウトのネイティブ サポート。

解決策:

Bootstrap 3 クラスだけではこれを実現できませんが、CSS を利用してカスタムのフルハイト列ソリューションを実装できます。 CSSテーブル。

HTML:

<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 テーブルを利用してフルハイトを実現します 効果。 .container 要素は表示: table に設定され、.row 要素は表示: table-row に設定されます。列要素 (.col-md-3 および .col-md-9) は、display: table-cell および float: none に設定され、デフォルトの float 動作が削除されます。

レスポンシブ調整

反応的な動作を確保するには、特定のブレークポイントの CSS を変更します。たとえば、メディア クエリを使用して、中程度の画面幅以上のテーブル表示プロパティのみを適用できます。

カスタム クラス:

ネイティブ ブートストラップ列の変更を回避するにはクラスの場合、マークアップでカスタム クラス (no-float) を使用し、それにのみ CSS テーブル スタイルを適用します。 class.

考慮事項:

• 1:3 の比率は CSS にハードコードされています。他の比率の場合は、パディングを調整する必要があります。
• すべての画面サイズでフルハイトの列の場合は、マークアップからブートストラップ列クラスを削除します。

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