Wie kann man die Seitenleistennavigation in Fluid Twitter Bootstrap 2.0 reparieren?-CSS-Tutorial-php.cn

Wie kann man die Seitenleistennavigation in Fluid Twitter Bootstrap 2.0 reparieren?

Susan Sarandon

Freigeben： 2024-11-11 16:01:02

Original

408 Leute haben es durchsucht

How to Fix the Sidebar Navigation in Fluid Twitter Bootstrap 2.0?

Korrigieren Sie die Seitenleistennavigation in Fluid Twitter Bootstrap 2.0

Das Erreichen einer Seitenleistennavigation, die beim Scrollen in einem flüssigen Layout stationär bleibt, ist unkompliziert.

Implementierung

CSS

Definieren Sie eine neue sidebar-nav-fixed-Klasse, um Ihre Seitenleiste zu reparieren und Ihrer Inhaltsdiv eine Offset-Klasse hinzuzufügen um den linken Rand auszugleichen:

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

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

Nach dem Login kopieren

Aktualisierte Option

Für Berücksichtigen Sie bei der responsiven Kompatibilität das folgende 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;
    }
}

Nach dem Login kopieren

HTML

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

Nach dem Login kopieren

Beachten Sie, dass es in der festen Seitenleiste eine geringfügige Breitenabweichung gibt, da diese die Breite nicht vom Container-Div erbt .

Alternative Methode

Um die Seitenleiste fixiert zu halten, bis das Raster für die mobile Ansicht herunterfällt, verwenden Sie diese CSS:

.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;
    }
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann man die Seitenleistennavigation in Fluid Twitter Bootstrap 2.0 reparieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!