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

Bootstrap 3 全高兩列版面配置

問題：

問題：

建立一個兩列-ootp 3中的全高列佈局提出了一個挑戰，因為缺乏對此特定佈局的原生支援。

解決方案：

雖然僅 Bootstrap 3 類別無法實現此目的，但我們可以利用 CSS 來實現自訂全高列使用 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>

HTML:

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:

CSS:

此解決方案利用CSS表來達到全高效果。 .container 元素設定為顯示：table，.row 元素設定為顯示：table-row。列元素（.col-md-3 和 .col-md-9）設定為 display: table-cell 和 float: none，這會刪除預設的浮動行為。

響應式調整

為了確保回應行為，您可以修改特定斷點的 CSS。例如，您可以使用媒體查詢僅套用中等螢幕寬度及以上的表格顯示屬性。

• 自訂類別：
• 避免修改本機 Bootstrap 列類，我們在標記中使用自訂類別（非浮動），並且僅將 CSS表格樣式應用於該類別

注意事項：1:3 的比例是硬編碼在 CSS 中的。對於其他比例，您需要調整填充。 對於所有螢幕尺寸上的全高列，請從標記中刪除 Bootstrap 列類別。

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