如何在Bootstrap 3中實現全高兩欄佈局？

Bootstrap 3 兩列全高最佳化

在 Bootstrap 3 中，建立具有兩列的全高佈局可能具有挑戰性。本機類別不支援開箱即用。但是，我們可以使用自訂 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;
}

此建立全高列。 「.no-float」類別可防止由於 Bootstrap 基於浮動的佈局而導致列折疊。

其他注意事項：

• 保持1:3中等螢幕寬度及以上的比例，使用「.col-md-3」和「.col -md-9”
• 如果所有螢幕寬度都需要此比例，請考慮刪除Bootstrap 列類別以避免不當使用。
• 較小的螢幕預設為常規 Bootstrap 列行為，每列都採用完整的寬度。

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