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

在 Bootstrap 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>

相關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;
}

說明🎜>此程式碼實現了中等螢幕寬度及以上的全高列和1:3 比例（導航：內容） 。使用自訂 CSS 類別（非浮動）來防止列浮動並確保它們顯示為表格單元格。

注意事項

Bootstrap 的本機列類別（col-md-3、col-md-9）用於回應能力。

對於較小的螢幕（中下），列恢復為預設引導行為（每列佔據 100% 寬度）。
• 如果所有螢幕寬度都需要 1:3 比例，則可以從標記中刪除 bootstrap 的列類.

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