Wie kann ich die Seitenleiste beim Scrollen in Fluid Bootstrap 2.0 fixieren?

Die Seitenleiste beim Scrollen in Fluid Bootstrap 2.0 fixiert halten

Für ein flüssiges Layout ist es möglich, die Seitenleistennavigation beim Scrollen zu fixieren, indem eine benutzerdefinierte Klasse implementiert wird.

Benutzerdefiniertes CSS

Erstellen Sie eine .sidebar-nav-fixed-Klasse, um die feste Position der Seitenleiste zu steuern, und fügen Sie .row-fluid > hinzu. .span-fixed-sidebar zum Inhaltscontainer hinzufügen, um den Rand der Seitenleiste zu versetzen. Hier ist das CSS:

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

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

HTML-Struktur

Verwenden Sie die folgende HTML-Struktur, um die feste Seitenleiste zu implementieren:

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

Erweiterte Konfiguration

Für Für mehr Flexibilität können Sie CSS-Medienabfragen verwenden, um die Position der Seitenleiste basierend auf der Bildschirmgröße anzupassen. Hier ist ein Beispiel:

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

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

Diese Konfiguration hält die Seitenleiste fest, bis die Bildschirmgröße für kleine Bildschirme oder die mobile Ansicht sinkt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Seitenleiste beim Scrollen in Fluid Bootstrap 2.0 fixieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!