Wie erstelle ich eine feste Seitenleistennavigation in einem flüssigen Twitter Bootstrap 2.0-Layout?

Erstellen einer festen Seitenleistennavigation in Fluid Twitter Bootstrap 2.0

In einem flüssigen Bootstrap 2.0-Layout kann es möglich sein, beim Scrollen eine feste Seitenleistennavigation beizubehalten erreicht. So geht's:

1. Erstellen Sie eine benutzerdefinierte Seitenleistenklasse:
   Definieren Sie eine CSS-Klasse für die feste Seitenleiste, z. B. .sidebar-nav-fixed. Weisen Sie ihm Eigenschaften wie Position zu: fest, oben und Breite.
2. Erstellen Sie eine Offset-Inhaltsklasse:
   Um den durch die feste Seitenleiste erzeugten linken Rand zu kompensieren, fügen Sie eine Offset-Klasse hinzu zum Inhalt div. Beispiel: .row-fluid > .span-fixed-sidebar kann eine margin-left-Eigenschaft haben, die der Breite der festen Seitenleiste entspricht.

3. Aktualisiertes CSS:

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

4. Responsive Modifikationen:
   Zur Anpassung an unterschiedliche Bildschirmgrößen sollten Sie die Verwendung von Medienabfragen in Betracht ziehen. Zum Beispiel:

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

5. Zusätzliche Methode für die mobile Ansicht:
   Um eine feste Seitenleiste beizubehalten, bis sie für kleine Bildschirme statisch wird, passen Sie das CSS wie folgt an folgt:

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

Hinweis: Für Bootstrap-Versionen nach 2.0.4 sollten Sie die Verwendung des Affix jQuery-Plugins in Betracht ziehen, das ähnliche Funktionen bietet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine feste Seitenleistennavigation in einem flüssigen Twitter Bootstrap 2.0-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!