Ich möchte 5 gleiche Spalten auf einer Seite haben, die ich erstelle, und ich kann anscheinend nicht verstehen, wie das 5-Spalten-Raster hier verwendet wird: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsive
Wird das fünfspaltige Raster über einem Teil des Twitter-Bootstrap-Frameworks demonstriert?
Antworten:
Verwenden Sie fünf Divs mit einer Klasse von span2 und geben Sie dem ersten eine Klasse von offset1.
Voila! Fünf gleich beabstandete und zentrierte Säulen.
In Bootstrap 3.0 würde dieser Code so aussehen
quelle
Für Bootstrap 3 und höher
Eine fantastische volle Breite 5 Spalten mit Twitter Bootstrap - Layout wurde erstellt hier .
Dies ist bei weitem die fortschrittlichste Lösung, da sie nahtlos mit Bootstrap 3 zusammenarbeitet. Sie ermöglicht es Ihnen, die Klassen in Kombination mit den aktuellen Bootstrap-Klassen für reaktionsschnelles Design immer wieder zu verwenden.
CSS:
Fügen Sie dies Ihrem globalen Stylesheet oder sogar am Ende Ihres
bootstrap.css
Dokuments hinzu.Setzen Sie es ein!
Wenn Sie beispielsweise ein div-Element erstellen möchten, das sich auf mittleren Bildschirmen wie ein fünfspaltiges Layout und auf kleineren Bildschirmen wie zwei Spalten verhält, müssen Sie nur Folgendes verwenden:
ARBEITSDEMO - Erweitern Sie den Rahmen, damit die Spalten reagieren.
EINE ANDERE DEMO - Einbindung der neuen
col-*-5ths
Klassen in andere wiecol-*-3
undcol-*-2
. Ändern Sie die Größe des Rahmens, um zu sehen, wie sich allecol-xs-6
in derreaktionsschnellenAnsichtändern.Für Bootstrap 4
Bootstrap 4 verwendet jetzt standardmäßig die Flexbox, sodass Sie sofort auf die magischen Kräfte zugreifen können. Schauen Sie sich die Spalten für das automatische Layout an , die die Breite dynamisch anpassen, je nachdem, wie viele Spalten verschachtelt sind.
Hier ist ein Beispiel:
ARBEITSDEMO
quelle
col-*-15
könnte verwirrend sein. Es scheint zu implizieren, dass sie Teil eines 15-Spalten-Rastersystems sind, was sie nicht sind.col-*-15
ist in Ordnung mit mir,col-*-5ths
könnte aber ein etwas weniger verwirrender Spaltenname sein. Das ist es, was ich benutze, damit meine anderen Entwickler nicht verwirrt zu mir kommen.position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;
. Grundsätzlich erweitert sich der Code, den ich gepostet habe, nur so, dass sie genau mit dem in Bootstrap integrierten Styling übereinstimmen. Ich wende dann eine Breite von an,20%
damit 5 gleiche Spalten über die Seite passen. Sehr einfach :)Für Bootstrap 3 , wenn Sie wollen , in voller Breite und verwenden
LESS
,SASS
oder etwas ähnliches, alles , was Sie tun müssen, ist , nutzen Bootstrap der mixin Funktionenmake-md-column
,make-sm-column
usw.WENIGER:
SASS:
Sie können nicht nur bauen wahre voller Breite Bootstrap - Spalte Klassen diese Mixins verwenden, aber Sie können auch alle bauen verwandte Hilfsklassen wie
.col-md-push-*
,.col-md-pull-*
, und.col-md-offset-*
:WENIGER:
SASS:
Andere Antworten sprechen von einer Einstellung,
@gridColumns
die vollkommen gültig ist, aber die Kernspaltenbreite für den gesamten Bootstrap ändert. Wenn Sie die oben genannten Mixin-Funktionen verwenden, wird zusätzlich zu den Standard-Bootstrap-Spalten ein 5-Spalten-Layout hinzugefügt, sodass keine Tools von Drittanbietern oder vorhandene Stile beschädigt werden.quelle
2.4
eine fünfte von 12 (2.4*5=12
), funktioniert für Bootstrap 3 in einem 12-Spalten-Raster. Gilt auch fürmake-xs
,make-sm
aber es funktioniert nicht in Kombination mit anderen Standard-Col-Definitionen (letzte Priorität erhalten)offset
,pull
undpush
) auf dieser Basis für den eigenen Gebrauch. Fühlen Sie sich frei, es auszuprobierenUpdate 2019
Bootstrap 4.1+
Hier sind 5 gleiche Spalten voller Breite ( kein zusätzliches CSS oder SASS ), die das Auto-Layout-Raster verwenden :
http://www.codeply.com/go/MJTglTsq9h
Diese Lösung funktioniert, da Bootstrap 4 jetzt Flexbox ist. Sie können die 5 Spalten
.row
mit einer Unterbrechung wie<div class="col-12"></div>
oder<div class="w-100"></div>
alle 5 Spalten in dasselbe einschließen.Siehe auch: Bootstrap - 5-Spalten-Layout
quelle
flex-nowrap
zu,.row
da die (automatischen) Spalten die übergeordnete Breite überschreiten können.Unten finden Sie eine Kombination aus Antworten von @machineaddict und @Mafnah, die für Bootstrap 3 neu geschrieben wurden (funktioniert bisher gut für mich):
quelle
Behalten Sie den ursprünglichen Bootstrap mit 12 Spalten bei, passen Sie ihn nicht an. Die einzige Änderung, die Sie vornehmen müssen, ist ein CSS nach dem ursprünglichen auf Bootstrap reagierenden CSS, wie folgt :
Der folgende Code wurde für Bootstrap 2.3.2 getestet:
Und das HTML:
Hinweis: Auch wenn span2 mal 5 nicht 12 Spalten entspricht, haben Sie die Idee :)
Ein funktionierendes Beispiel finden Sie hier http://jsfiddle.net/v3Uy5/6/
quelle
Falls Sie nicht genau die gleiche Spaltenbreite benötigen , können Sie versuchen, 5-Spalten mithilfe der Verschachtelung zu erstellen:
jsfiddle
Die ersten beiden Spalten haben eine Breite von 5/12 * 1/2 ~ 20,83%
Die letzten drei Spalten: 7/12 * 1/3 ~ 19,44%
Ein solcher Hack liefert in vielen Fällen das akzeptable Ergebnis und erfordert keine CSS-Änderungen (wir verwenden nur die nativen Bootstrap-Klassen).
quelle
Erstellen Sie einen benutzerdefinierten Bootstrap-Download für ein 5-Spalten-Layout
Gehen Sie zur Anpassungsseite für Bootstrap 2.3.2 (oder Bootstrap 3 ) und legen Sie die folgenden Variablen fest (geben Sie keine Semikolons ein):
Laden Sie Ihren Build herunter. Dieses Raster würde in Standardcontainer passen und die Standardrinnenbreiten (fast) beibehalten.
Hinweis: Wenn Sie WENIGER verwenden, aktualisieren Sie
variables.less
stattdessen.quelle
Mit Flexbox http://output.jsbin.com/juziwu
quelle
Ich habe über Mafnahs Antwort abgestimmt, aber wenn ich das noch einmal betrachte, würde ich vorschlagen, dass Folgendes besser ist, wenn Sie die Standardränder usw. beibehalten.
quelle
quelle
Erstellen Sie 5 Elemente mit der Klasse col-sm-2 und fügen Sie dem ersten Element auch die Klasse col-sm-offset-1 hinzu
Ps dies wird nicht in voller Breite sein (es wird ein wenig von rechts und links vom Bildschirm eingerückt)
Der Code sollte ungefähr so aussehen
quelle
Bootstrap 4, variable Anzahl von Spalten pro Zeile
Wenn Sie bis zu fünf Spalten pro Zeile haben möchten , sodass immer noch weniger Spalten nur 1/5 der Zeile einnehmen, besteht die Lösung darin, die Mixins von Bootstrap 4 zu verwenden :
SCSS:
HTML:
quelle
Eine andere Möglichkeit, 5 Spalten in Bootstrap 3 zu aktivieren, besteht darin, das von Bootstrap standardmäßig verwendete 12-Spalten-Format zu ändern. Erstellen Sie anschließend ein Raster mit 20 Spalten (verwenden Sie Anpassen auf der Bootstrap-Website ODER verwenden Sie die WENIGER / SASS-Version).
Um die Bootstrap-Website anzupassen, gehen Sie zur Seite Anpassen und Herunterladen und aktualisieren Sie die Variable
@grid-columns
von12
bis20
. Dann können Sie sowohl 4 als auch 5 Spalten erstellen.quelle
Dies kann durch Verschachteln und Verwenden eines kleinen CSS-Overrides erfolgen.
Dann etwas CSS
}}
Hier ist ein Beispiel: Beispiel für 5 gleiche Spalten
Und hier ist mein vollständiger Bericht über Coderwall
Fünf gleiche Spalten in Bootstrap 3
quelle
Meiner Meinung nach ist es besser, es so mit weniger Syntax zu verwenden. Diese Antwort basiert auf der Antwort von @fizzix
Auf diese Weise verwenden Spalten Variablen (@ grid-gutter-width, Medien-Haltepunkte), die der Benutzer möglicherweise überschrieben hat, und das Verhalten von fünf Spalten stimmt mit dem Verhalten von 12 Spalten überein.
quelle
Das ist fantastisch: http://www.ianmccullough.net/5-column-bootstrap-layout/
Mach einfach:
Und CSS:
quelle
Standardmäßig bietet Bootstrap kein Rastersystem, mit dem wir ein Layout mit fünf Spalten erstellen können. Sie müssen die Standardspaltendefinition so erstellen, wie Bootstrap einige benutzerdefinierte Klassen und Medienabfragen in Ihrer CSS-Datei erstellt
und etwas HTML-Code
quelle
Bootstrap kann standardmäßig bis zu 12 Spalten skalieren? Das heißt, wenn wir ein 12-Spalten-Layout mit gleicher Breite erstellen möchten, schreiben wir zwölf Mal in div class = "col-md-1".
quelle
5 Spalten Layout mit Twitter Bootstrap Stil
quelle
Eine Lösung, die weder viel CSS erfordert noch das Standard-12-Colol-Layout des Bootstraps optimiert:
http://jsfiddle.net/0ufdyeur/1/
HTML:
CSS:
quelle
Erstellen Sie einfach eine neue Klasse und definieren Sie ihr Verhalten für jede Medienabfrage nach Bedarf
Hier ist eine funktionierende Demo https://codepen.io/giorgosk/pen/BRVorW
quelle
Ich denke, in Bootstrap 3 können wir so etwas tun, um den linken und rechten Rand zu entfernen:
und CSS
quelle
So können Sie im Bootstrap ein 5-Spalten-Raster hinzufügen
quelle
Die einfachste Lösung, ohne CSS bearbeiten zu müssen, wäre:
Und wenn Sie diese benötigen, um über einen Haltepunkt hinaus zu brechen, machen Sie einfach einen BTN-Gruppenblock. Hoffe das hilft jemandem.
quelle
Fünf Spalten sind eindeutig nicht Teil des Bootstraps.
Mit Bootstrap v4 (Alpha) gibt es jedoch zwei Dinge, die bei einem komplizierten Rasterlayout hilfreich sind
In einfachen Worten, ich benutze
Sei es 5,7,9,11,13 oder etwas anderes, es wird in Ordnung sein. Ich bin mir ziemlich sicher, dass der 12-Grids-Standard mehr als 90% des Anwendungsfalls bedienen kann - also lasst uns so entwerfen - auch einfacher entwickeln!
Das nette Flex-Tutorial finden Sie hier " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ".
quelle
Ich habe SASS-Mixin-Definitionen basierend auf Bootstrap-Definitionen für eine beliebige Anzahl von Spalten erstellt (persönlich verwende ich neben 12 8, 10 und 24):
Und Sie können einfach Klassen erstellen, indem Sie:
Ich hoffe, jemand wird es nützlich finden
quelle
Wenn jemand Bootstrap-Sass (v3) verwendet, ist hier einfacher Code für 5 Spalten mit Bootstrap-Mischungen:
Stellen Sie sicher, dass Sie Folgendes angegeben haben:
quelle
Für Bootstrap 4.4+
Verwenden Sie die brandneuen
row-cols-n
Klassen.row-cols-5
Ihrem.row
div Klasse hinzu . Kein benutzerdefiniertes CSS erforderlich.Für Bootstrap 4-Versionen vor Bootstrap 4.4
Kopieren Sie das unten stehende CSS (fantastisches CSS von Bootstrap-Autoren) und fügen Sie es Ihrem Projekt hinzu
Lesen Sie die oben genannten Dokumente, um sie korrekt zu verwenden.
.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}
quelle
quelle