Ist es möglich, dass die Navigation in der Seitenleiste beim flüssigen Layout immer auf dem Bildlauf fixiert bleibt?
Ist es möglich, dass die Navigation in der Seitenleiste beim flüssigen Layout immer auf dem Bildlauf fixiert bleibt?
Hinweis: Es gibt ein Bootstrap-jQuery-Plugin, das dies und vieles mehr tut und einige Versionen nach dem Schreiben dieser Antwort (vor fast zwei Jahren) mit dem Namen Affix eingeführt wurde . Diese Antwort gilt nur, wenn Sie Bootstrap 2.0.4 oder niedriger verwenden.
Ja, erstellen Sie einfach eine neue feste Klasse für Ihre Seitenleiste und fügen Sie Ihrem Inhaltsbereich eine Offset-Klasse hinzu, um den linken Rand wie folgt auszugleichen:
CSS
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
Demo: http://jsfiddle.net/U8HGz/1/show/ Hier bearbeiten: http://jsfiddle.net/U8HGz/1/
Aktualisieren
Meine Demo wurde behoben, um das reaktionsfähige Bootstrap-Blatt zu unterstützen. Jetzt fließt es mit der reaktionsschnellen Funktion des Bootstraps.
Hinweis: Diese Demo wird mit der oberen festen Navigationsleiste ausgeführt, sodass beide Elemente position:static
beim Ändern der Bildschirmgröße geändert werden. Ich habe eine weitere Demo darunter platziert, die die feste Seitenleiste beibehält, bis der Bildschirm für die mobile Ansicht abfällt.
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-->
kleiner Hinweis: Es gibt einen Unterschied von 10px / 1% bei der Breite der festen Seitenleiste, was darauf zurückzuführen ist, dass ich, da es die Breite nicht vom span3-Container div erbt, weil es fest ist, ein a einfallen lassen musste Breite. Es ist nah genug.
Und hier ist eine andere Methode, wenn Sie die Seitenleiste festhalten möchten, bis das Raster für eine kleine Bildschirm- / Mobilansicht abfällt.
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;
}
}
margin-left:290px
Deklaration der.span-fixed-sidebar
Klasse zurückzuführen ist, die Platz für die Seitenleiste gemacht hat. Wenn diese nicht vorhanden wäre, würde der Inhalt die Seitenleiste auf kleineren Bildschirmen überlappen. Sie können die horizontale Bildlaufleiste jedoch entfernen, indem Sie sie explizit auf dembody
Tag ausblendenbody { overflow-x: hidden; }
.Die neueste Boostrap (2.1.0) verfügt über eine neue JS-Funktion "Affix" speziell für diese Art von Anwendung, FYI.
quelle
Dies wird das reaktionsschnelle Webdesign vermasseln. Binden Sie die feste Seitenleiste besser in eine Medienabfrage ein.
CSS
HTML
Jetzt ist die Seitenleiste nur noch fixiert, wenn der Viewpot größer als 768px ist.
quelle
Dies ist ohne Javascript nicht möglich. Ich finde affix.js zu komplex, deshalb benutze ich lieber:
Stickyfloat
quelle
Ich begann mit Andres 'Antworten und bekam eine klebrige Seitenleiste wie diese:
HTML:
CSS:
JS / jQuery:
Ich gehe davon aus, dass ich auch JS benötige, um die Variable 'sidebarwidth' zu aktualisieren, wenn die Größe des Ansichtsfensters geändert wird.
quelle
Sehr einfach, Navi oder alles, was Sie wollen, zu reparieren. Alles, was Sie brauchen, ist, Ihr Fix-Tag so zu schreiben und es in Ihren Body-Bereich einzufügen
quelle
Mit der aktuellen Bootstrap-Version (3.3.2) gibt es eine gute Möglichkeit, eine feste Seitenleiste für die Navigation zu erreichen.
Diese Lösung funktioniert auch gut mit der wieder eingeführten Container-Fluid-Klasse, was bedeutet, dass ein reaktionsschnelles Vollbild-Layout leicht möglich ist.
Normalerweise müssten Sie feste Breiten und Ränder verwenden, oder die Navigation würde den Inhalt überlappen, aber mit Hilfe der leeren Platzhalterspalte wird der Inhalt immer an der richtigen Stelle positioniert.
Das folgende Setup umschließt den Inhalt, wenn Sie die Fenstergröße auf weniger als 768 Pixel ändern und die feste Navigation freigeben.
Ein funktionierendes Beispiel finden Sie unter http://www.bootply.com/ePvnTy1VII .
CSS
HTML
quelle