カスタム CSS を使用して Bootstrap 3 でフルハイトの列を作成する方法

ブートストラップ 3 フルハイト列: カスタム CSS ソリューション

概要:

作成Twitter Bootstrap 3 でのフルハイトのレイアウトは難しい場合があります。 Bootstrap のネイティブ クラスはこの機能をサポートしていませんが、カスタム CSS を使用してこの効果を実現できます。

カスタム CSS アプローチ:

1. 設定100% 高さ:
   ボディ、コンテナ、行要素の高さを次のように設定します。 100% は、ビューポートの高さ全体に広がるようにします。
2. テーブルとして表示:
   display: table を使用して、コンテナ要素をテーブルに変換します。これにより、コンテナの内容を表形式の構造に配置できます。
3. Floating Cell:
   no-float などのカスタム クラスをナビゲーション列に追加します。このクラスに、display: table-cell および float: none を設定します。これにより、ナビゲーション列がフローティングになるのを防ぎ、コンテンツ列と垂直方向に整列できるようになります。

マークアップ:

<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; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

メリットと考慮事項:

• このカスタム CSS ソリューションは、Bootstrap 3 と互換性のあるフルハイトのレイアウトを提供します。
• ナビゲーションとコンテンツの 1:3 の比率は、次の方法で調整できます。 CSS で列幅を変更します。
• ただし、カスタム クラスを使用することが重要です (例: no-float)、競合を避けるためにブートストラップのネイティブ列クラスを変更する代わりに。

以上がカスタム CSS を使用して Bootstrap 3 でフルハイトの列を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。