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

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

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

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

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

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!