如何在 Fluid Bootstrap 2.0 中保持側邊欄固定在滾動上？

在Fluid Bootstrap 2.0 中保持側邊欄固定在滾動上

對於流體佈局，可以透過實作自訂類別來修復滾動上的側邊欄導覽。

自訂CSS

建立.sidebar-nav-fixed 類別來控制側邊欄的固定位置，並新增.row-fluid > .span-fixed-sidebar 到內容容器以偏移側邊欄的邊距。 CSS 如下：

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

HTML 結構

使用以下HTML 結構來實現固定側邊欄：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav sidebar-nav-fixed">
        ...
      </div>
    </div>
    <div class="span9">
      ...
    </div>
  </div>
</div>

高級配置

對於更靈活，使用CSS 媒體查詢根據螢幕尺寸調整側邊欄的位置。這是一個範例：

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position:static;
        width: auto;
    }
}

此配置可使側邊欄保持固定，直到小螢幕或移動視圖的螢幕尺寸下降。

以上是如何在 Fluid Bootstrap 2.0 中保持側邊欄固定在滾動上？的詳細內容。更多資訊請關注PHP中文網其他相關文章！