Kann eine feste Seitenleiste in einem Fluid Bootstrap 2.0-Layout implementiert werden?

Beibehalten einer festen Seitenleiste im Fluid Bootstrap 2.0-Layout

Problem: Ist es möglich, die Seitenleistennavigation fest beizubehalten? Fließende Layouts beim Scrollen?

Lösung: Ja, das ist es ist möglich. So geht's:

1. Erstellen Sie eine feste Klasse für die Seitenleiste:

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

2. Wenden Sie einen Offset an Klasse zum Inhalt div:

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

Dieses CSS stellt das sicher Die Seitenleiste bleibt beim Scrollen fixiert und passt den Inhaltsbereich an, um die Breite der Seitenleiste auszugleichen.

Verfeinerte Lösung:

• Update: Um das responsive Layout von Bootstrap zu unterstützen, wurde die Demo wie folgt aktualisiert CSS:

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

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

• Alternativer Ansatz: So behalten Sie die feste Seitenleiste bei, bis das Layout zur mobilen Ansicht wechselt:

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top: 70px;
    }
}

Hinweis: Bootstrap 2.0.4 und frühere Versionen verfügen nicht über das Affix jQuery-Plugin, das erweiterte Funktionen bietet Funktionalität zum Fixieren von Seitenleistenelementen. Diese Lösung gilt nur für frühere Bootstrap-Versionen.

Das obige ist der detaillierte Inhalt vonKann eine feste Seitenleiste in einem Fluid Bootstrap 2.0-Layout implementiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!