如何在 Bootstrap 3 中建立全高兩列佈局？

Bootstrap 3 兩列全高：綜合指南

簡介
在Bootstrap 3 中實現全高列佈局挑戰可以是這是一個佈局，因為本機類別不支援此功能。本文探討了一種利用自訂 CSS 創建比例為 1:3 的全高列的解決方案，滿足兩列都延伸視口整個高度的佈局需求。

HTML 標記
此版面的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; /*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 樣式

為了實現全高列，我們結合了使用display: table; 的自訂CSS；屬性來建立CSS表格，確保兩列都延伸視口的整個高度。

說明
• CSS 樣式定義以下內容：
• html、body、.container 設定為height: 100%；確保內容填滿整個視口。
• .container 設定為 display: table;建立 CSS 表格。
• .row 將 display 屬性設為 table-row 以在 css 表格中建立行。

.row .no-float 將 display: table-cell 設定為使列的行為類似於行中的表格單元格。

浮動：沒有覆寫Bootstrap 的預設浮動行為

• 自訂
• 編輯.container 上的margin-top 值以調整標題的上邊距。

修改.container 上的填充值用於設定容器的左/右間距列。 從列中刪除 col-md-* 類，以在所有螢幕寬度上建立固定的 1:3 比例。

以上是如何在 Bootstrap 3 中建立全高兩列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！