Ich lerne, wie man Bootstrap benutzt. Derzeit watete ich mich durch Layouts. Während Bootstrap ziemlich cool ist, scheint alles, was ich sehe, veraltet zu sein. Für mein Leben habe ich ein grundlegendes Layout, das ich nicht herausfinden kann. Mein Layout sieht folgendermaßen aus:
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|
Dieses Raster muss die volle Höhe des Fensters einnehmen. Nach meinem Verständnis muss ich feste und flüssige Breiten mischen. Bootstrap 3.0 scheint jedoch nicht mehr über die Fluidklasse zu verfügen. Selbst wenn es so wäre, könnte ich nicht herausfinden, wie man flüssige und feste Säulengrößen mischt. Weiß jemand, wie man das in Bootstrap 3.0 macht?
twitter-bootstrap
twitter-bootstrap-3
Node Newbie
quelle
quelle
Antworten:
Es gibt wirklich keine einfache Möglichkeit, flüssige und feste Breiten mit Bootstrap 3 zu mischen. Es soll so sein, da das Rastersystem so konzipiert ist, dass es flüssig und reaktionsschnell ist. Sie könnten versuchen, etwas zu hacken, aber es würde dem widersprechen, was das Responsive Grid-System versucht, mit dem Ziel, dieses Layout über verschiedene Gerätetypen hinweg fließen zu lassen.
Wenn Sie sich an dieses Layout halten müssen, würde ich in Betracht ziehen, Ihre Seite mit benutzerdefiniertem CSS zu gestalten und das Raster nicht zu verwenden.
quelle
Bearbeiten: Da viele Leute dies zu tun scheinen, habe ich hier eine kurze Anleitung mit einem allgemeineren Anwendungsfall geschrieben: https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Ich hoffe es hilft.
Das Bootstrap3-Rastersystem unterstützt das Verschachteln von Zeilen, sodass Sie die Stammzeile anpassen können, um Seitenmenüs mit fester Breite zuzulassen.
Sie müssen einen Abstand links in die Stammzeile einfügen und dann eine untergeordnete Zeile haben, die Ihre normalen Rasterlayoutelemente enthält.
So mache ich das normalerweise: http://jsfiddle.net/u9gjjebj/
html
CSS
quelle
position: fixed
bedeutet, dass beim Scrollen der Inhalt dieser Spalte über dem Rest der Seite schwebt. In meinem Fall habe ich es mit behobenposition: absolute
.oder verwenden Sie die Anzeigeeigenschaft mit Tabellenzelle;
CSS
html
http://jsfiddle.net/DnGDz/
quelle
, becouse
display: table-cell` wirddisplay:block
...Ich hatte ein etwas anderes Problem:
Infolgedessen habe ich auf
float
die linke und rechte Spalte zurückgegriffen und konnte dann Bootstraps verwendenrow
, um die Flüssigkeitsspalten dazwischen zu erstellen .quelle
margin
undpadding
in meiner Reihe in der Mitte, aber das sollte ein lösbares Problem sein. Was sind die unbeabsichtigten Folgen dieses Ansatzes?Aktualisiert 2018
IMO, der beste Weg, dies in Bootstrap 3 zu erreichen, wäre die Verwendung von Medienabfragen, die an den Haltepunkten von Bootstrap ausgerichtet sind, sodass Sie nur die Spalten mit fester Breite als größere Bildschirme verwenden und das Layout dann auf kleineren Bildschirmen reagieren lassen. Auf diese Weise behalten Sie die Reaktionsfähigkeit ...
Working Bootstrap Fixed-Fluid Demo
Bootstrap 4 verfügt über eine Flexbox, sodass Layouts wie dieses viel einfacher sind: http://www.codeply.com/go/eAYKvDkiGw
quelle
OK, meine Antwort ist super nett:
jsfiddle Spielplatz
Wenn Sie alle Browser unterstützen möchten, verwenden Sie https://github.com/10up/flexibility
quelle
UPDATE 2014-11-14: Die folgende Lösung ist zu alt. Ich empfehle die Verwendung der Flexbox-Layoutmethode. Hier ist eine Übersicht: http://learnlayout.com/flexbox.html
Meine Lösung
html
scss
Ohne zu viel Bootstrap-Layout-Code zu ändern.
Update (nicht von OP): Hinzufügen eines Code-Snippets unten, um das Verständnis dieser Antwort zu erleichtern. Aber es scheint nicht wie erwartet zu funktionieren.
Code-Snippet anzeigen
quelle
Warum setzen Sie nicht einfach die linken beiden Spalten auf einen festen Wert in Ihrem eigenen CSS und erstellen dann ein neues Rasterlayout der vollständigen 12 Spalten für den Rest des Inhalts?
quelle