Fünf gleiche Spalten in Twitter Bootstrap

Ich möchte 5 gleiche Spalten auf einer Seite haben, die ich baue, und ich kann nicht scheinen, zu verstehen, wie das 5 Spaltengitter hier verwendet wird: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / reagieren

Wird das Fünf-Spalten-Grid über einem Teil des Twitter-Bootstrap-Frameworks demonstriert?

Verwenden Sie fünf Divs mit einer class von span2 und geben Sie dem ersten eine class von offset1.

Voila! Fünf gleich beabstandete und zentrierte Spalten.


In Bootstrap 3.0 würde dieser Code aussehen

 

Für Bootstrap 3 und höher

Es wurde ein fantastisches Layout mit 5 Spalten in voller Breite mit Twitter Bootstrap erstellt.

Dies ist bei weitem die fortschrittlichste Lösung, da es nahtlos mit Bootstrap 3 zusammenarbeitet. Es ermöglicht Ihnen, die classn immer wiederzuverwenden, in Paar mit den aktuellen Bootstrap-classn für responsives Design.

CSS:
Fügen Sie dies Ihrem globalen Stylesheet oder sogar bis zum Ende Ihres bootstrap.css Dokuments hinzu.

 .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } } 

Setzen Sie es zu verwenden!
Wenn Sie beispielsweise ein div-Element erstellen möchten, das sich wie ein fünfspaltiges Layout auf mittleren Bildschirmen verhält und zwei Spalten auf kleineren hat, müssen Sie nur Folgendes verwenden:

 
...

WORKING DEMO – Erweitern Sie den Rahmen, um zu sehen, dass die Spalten reagieren.

col-*-5ths DEMOcol-*-5ths der neuen col-*-5ths classn mit anderen wie col-*-3 und col-*-2 . Verändern Sie die Größe des Rahmens, um zu sehen, dass alle in der responsiven Ansicht zu col-xs-6 wechseln.


Für Bootstrap 4

Bootstrap 4 verwendet nun standardmäßig flexbox, so dass Sie direkt aus der Box auf seine magischen Kräfte zugreifen können. Überprüfen Sie die Spalten für das automatische Layout , die die Breite dynamisch anpassen, je nachdem, wie viele Spalten geschachtelt sind.

Hier ist ein Beispiel:

 
1 of 5
2 of 5
3 of 5
4 of 5
5 of 5

ARBEITS-DEMO

Wenn Sie für Bootstrap 3 die volle Breite wünschen und LESS , SASS oder etwas ähnliches verwenden, müssen Sie nur die Bootstrap-Mixing-functionen make-md-column , make-sm-column usw. verwenden.

WENIGER:

 .col-lg-2-4{ .make-lg-column(2.4) } .col-md-2-4{ .make-md-column(2.4) } .col-sm-2-4{ .make-sm-column(2.4) } 

SASS:

 .col-lg-2-4{ @include make-lg-column(2.4) } .col-md-2-4{ @include make-md-column(2.4) } .col-sm-2-4{ @include make-sm-column(2.4) } 

Mit diesen Mixins können Sie nicht nur echte Bootstrap-Spaltenklassen mit voller Breite erstellen, sondern auch alle zugehörigen .col-md-push-* wie .col-md-push-* , .col-md-pull-* und .col-md-offset-* :

WENIGER:

 .col-md-push-2-4{ .make-md-column-push(2.4) } .col-md-pull-2-4{ .make-md-column-pull(2.4) } .col-md-offset-2-4{ .make-md-column-offset(2.4) } 

SASS:

 .col-md-push-2-4{ @include make-md-column-push(2.4) } .col-md-pull-2-4{ @include make-md-column-pull(2.4) } .col-md-offset-2-4{ @include make-md-column-offset(2.4) } 

Andere Antworten @gridColumns das Einstellen von @gridColumns das vollkommen gültig ist, aber das ändert die @gridColumns für den gesamten Bootstrap. Wenn Sie die obigen Mixing-functionen verwenden, wird zusätzlich zu den Standard-Bootstrap-Spalten ein 5-Spalten-Layout hinzugefügt, sodass keine Tools von Drittanbietern oder vorhandenes Styling beschädigt werden.

Unten ist eine Kombination aus @machineaddict und @Mafnah Antworten, neu geschrieben für Bootstrap 3 (funktioniert für mich bisher):

 @media (min-width: 768px){ .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } } @media (min-width: 1200px) { .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } } @media (min-width: 768px) and (max-width: 979px) { .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } } 

Behalten Sie den ursprünglichen Bootstrap mit 12 Spalten bei, passen Sie ihn nicht an. Die einzige Änderung, die Sie vornehmen müssen, ist einige CSS nach dem ursprünglichen bootstrap responsive CSS, wie folgt:

Der folgende Code wurde für Bootstrap 2.3.2 getestet:

  

Und der html:

 

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

Hinweis: Obwohl die span2 mal 5 nicht gleich 12 Spalten ist, kommt man auf die Idee 🙂

Ein funktionierendes Beispiel finden Sie hier http://jsfiddle.net/v3Uy5/6/

Aktualisierung 2018

Bootstrap 4.0

Hier sind 5 gleiche Spalten mit voller Breite ( kein zusätzliches CSS oder SASS ) mit dem automatischen Layout-Raster :

 
1
2
3
4
5

http://www.codeply.com/go/MJTglTsq9h

Diese Lösung funktioniert, weil Bootstrap 4 jetzt flexbox ist. Sie können die 5 Spalten dazu bringen, innerhalb derselben .row Datei zu .row indem Sie eine Clearfix-Unterbrechung wie

oder

alle 5 verwenden Säulen.

Siehe auch: Bootstrap – 5-Spalten-Layout

Erstellen Sie einen benutzerdefinierten Bootstrap-Download für das 5-Spalten-Layout

Gehe zur Bootstrap 2.3.2 (oder Bootstrap 3 ) Anpassungsseite und setze die folgenden Variablen (gib keine Semikolons ein):

 @gridColumns: 5; @gridColumnWidth: 172px; @gridColumnWidth1200: 210px; @gridColumnWidth768: 128px; @gridGutterWidth768: 21px; 

Laden Sie Ihren Build herunter. Dieses Gitter würde in Standardcontainer passen, wobei die Standardrinnenbreiten (fast) beibehalten werden.

Hinweis: Wenn Sie LESS verwenden, aktualisieren Sie stattdessen variables.less .

Falls Sie nicht genau die gleiche Spaltenbreite benötigen, können Sie versuchen, 5-Spalten mit Hilfe der Verschachtelung zu erstellen:

 
Column 1
Column 2
Column 3
Column 4
Column 5

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 gibt in vielen Fällen das akzeptable Ergebnis und erfordert keine CSS-Änderungen (wir verwenden nur die nativen Bootstrap-classn).

Ich habe Mafnahs Antwort gewählt, aber wenn ich mir das nochmal ansehe, würde ich vorschlagen, dass das Folgende besser ist, wenn Sie die Standardmargen usw. beibehalten.

 
.equal .span2 { width: 17.9%; }

Mit flexbox http://output.jsbin.com/juziwu

 .flexrow { display: flex; background: lightgray; /*for debug*/ } .flexrow > * { flex: 1; margin: 1em; outline: auto green; } 
 
...
...
...
...
..
...
 
.equal .span2 { width: 20%; }

Erstellen Sie 5 Elemente mit der class col-sm-2 und fügen Sie dem ersten Element auch die class col-sm-offset-1 hinzu

Ps dies wird nicht die volle Breite sein (es wird ein wenig von der rechten und linken Seite des Bildschirms eingerückt werden)

Der Code sollte etwa so aussehen

 

Eine weitere Möglichkeit, 5 Spalten in Bootstrap 3 zu aktivieren, besteht darin, das 12-Spalten-Format zu ändern, das standardmäßig von Bootstrap verwendet wird. Und dann erstellen Sie ein 20-Spalten-Raster (verwenden Sie anpassen auf der Bootstrap-Website oder verwenden Sie die LESS / SASS-Version).

Um auf der Bootstrap-Website anzupassen, gehen Sie auf die Seite Anpassen und Download , aktualisieren Sie die Variable @grid-columns von 12 auf 20 . Dann können Sie 4 und 5 Spalten erstellen.

Es kann mit Nesting und mit einem kleinen css Over-Ride gemacht werden.

 
Column 1
Column 2
Column 3
Col 4
Col 5

Dann etwas CSS

 @media (min-width: 768px) { div.col-sm-7.five-three { width: 60% !important; } div.col-sm-5.five-two { width: 40% !important; } 

}

Hier ist ein Beispiel: 5 gleiches Spaltenbeispiel

Und hier ist meine vollständige Beschreibung auf Coderwall

Fünf gleiche Spalten im Bootstrap 3

Meiner Meinung nach ist es besser, es mit weniger Syntax zu verwenden. Diese Antwort basiert auf der Antwort von @fizzix

Auf diese Weise verwenden Spalten Variablen (@ grid-gosse-width, media breakpoints), die der Benutzer möglicherweise überschrieben hat, und das Verhalten von fünf Spalten entspricht dem Verhalten von 12 column grid.

 /* * Special grid for ten columns, * using its own scope * so it does not interfere with the rest of the code */ & { @import (multiple) "../bootstrap-3.2.0/less/variables.less"; @grid-columns: 5; @import (multiple) "../bootstrap-3.2.0/less/mixins.less"; @column: 1; .col-xs-5ths { .make-xs-column(@column); } .col-sm-5ths { .make-sm-column(@column); } .col-md-5ths { .make-md-column(@column); } .col-lg-5ths { .make-lg-column(@column); } } /***************************************/ /* Using default bootstrap now /***************************************/ @import (multiple) "../bootstrap-3.2.0/less/variables.less"; @import (multiple) "../bootstrap-3.2.0/less/mixins.less"; /* ... your normal less definitions */ 

Das ist großartig: http://www.ianmccullough.net/5-column-bootstrap-layout/

Mach einfach:

 

Und CSS:

 .col-xs-15{ width:20%; } 

Standardmäßig bietet Bootstrap kein Grid-System, mit dem wir fünf Spalten erstellen können. Sie müssen eine Standard-Spaltendefinition erstellen, so wie Bootstrap einige benutzerdefinierte classn und Medienabfragen in Ihrer CSS-Datei erstellt

 .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } 

und etwas HTML-Code

 
...

Eine Lösung, die nicht viel CSS benötigt, noch das Bootstrap-Standard-12col-Layout optimieren:

http://jsfiddle.net/0ufdyeur/1/

HTML:

 

CSS:

 @media (min-width: 1200px) { /*if not lg, change this criteria*/ .stretch{ width: 120%; /*the actual trick*/ } } 

In Bootstrap 3 denke ich, dass wir so etwas tun können, um den linken und rechten Rand zu entfernen:

 

und CSS

 .this_row { margin: 0 -5%; } 

Wie Sie 5 Spaltengitter im Bootstrap hinzufügen können

 .col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;} .item{width:100%;height:100px; background-color:#cfcfcf;} .col-xs-1-5{width: 20%;float:left;} } @media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} } @media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} } @media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} } 
 
Item 1
Item 2
Item 3
Item 4
Item 5

Bootstrap kann standardmäßig bis zu 12 Spalten skalieren? Das bedeutet, wenn wir ein 12-Spalten-Layout mit gleicher Breite erstellen möchten, würden wir zwölf Mal in div class = “col-md-1” schreiben.

 
1
2
3
4
5

Die einfachste Lösung ohne CSS zu bearbeiten wäre:

 
Column 1
Column 2
Column 3
Column 4
Column 5

Und wenn Sie solche brauchen, die über jeden Haltepunkt hinaus brechen, machen Sie einfach btn-group block. Hoffe, das hilft jemandem.

Fünf Spalten sind eindeutig nicht Teil des Bootstrap-Designs.

Aber mit Bootstrap v4 (Alpha) gibt es zwei Dinge, die bei einem komplizierten Gitter-Layout helfen können

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), der neue Elementtyp (offiziell – https://www.w3.org/TR/css-flexbox-1/ )
  2. Responsive Dienstprogramme ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

In einfachen Worten benutze ich

   

Sei es 5,7,9,11,13 oder etwas Wahrscheinlichkeiten, es wird in Ordnung sein. Ich bin mir ziemlich sicher, dass der 12-Grids-Standard in der Lage ist, mehr als 90% des Anwendungsfalls zu bedienen – also lass uns das so gestalten – entwickle dich auch einfacher!

Das nette Flex-Tutorial ist hier ” https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ich habe SASS-Mixin-Definitionen basierend auf Bootstrap-Definitionen für eine beliebige Anzahl von Spalten erstellt (persönlich neben 12 verwende ich 8, 10 und 24):

 // Extended bootstrap grid system // // Framework grid generation // // Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num. @mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") { @for $i from (1 + 1) through $num-columns { $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}"; } #{$list} { position: relative; min-height: 1px; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); } } @mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") { @for $i from (1 + 1) through $num-columns { $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}"; } #{$list} { float: left; } } @mixin calc-extended-grid-column($index, $num-columns, $class, $type) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index}-#{$num-columns} { width: percentage(($index / $num-columns)); } } @if ($type == push) and ($index > 0) { .col-#{$class}-push-#{$index}-#{$num-columns} { left: percentage(($index / $num-columns)); } } @if ($type == pull) and ($index > 0) { .col-#{$class}-pull-#{$index}-#{$num-columns} { right: percentage(($index / $num-columns)); } } @if ($type == offset) and ($index > 0) { .col-#{$class}-offset-#{$index}-#{$num-columns} { margin-left: percentage(($index / $num-columns)); } } } @mixin loop-extended-grid-columns($num-columns, $class, $type) { @for $i from 1 through $num-columns - 1 { @include calc-extended-grid-column($i, $num-columns, $class, $type); } } @mixin make-extended-grid($class, $num-columns) { @include float-extended-grid-columns($class, $num-columns); @include loop-extended-grid-columns($num-columns, $class, width); @include loop-extended-grid-columns($num-columns, $class, pull); @include loop-extended-grid-columns($num-columns, $class, push); @include loop-extended-grid-columns($num-columns, $class, offset); } 

Und Sie können einfach classn erstellen, indem Sie:

 $possible-number-extended-grid-columns: 8, 10, 24; @each $num-columns in $possible-number-extended-grid-columns { // Columns @include make-extended-grid-columns($num-columns); // Extra small grid @include make-extended-grid(xs, $num-columns); // Small grid @media (min-width: $screen-sm-min) { @include make-extended-grid(sm, $num-columns); } // Medium grid @media (min-width: $screen-md-min) { @include make-extended-grid(md, $num-columns); } // Large grid @media (min-width: $screen-lg-min) { @include make-extended-grid(lg, $num-columns); } } 

Ich hoffe, dass jemand es nützlich finden wird

5 Spalten Layout mit Twitter Bootstrap-Stil

 .col-xs-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 100%; float: left; } @media (min-width: 768px) { .col-xs-15 { width: 50%; float: left; } } @media (min-width: 992px) { .col-xs-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-xs-15 { width: 20%; float: left; } } 

Erstellen Sie einfach eine neue class und definieren Sie das Verhalten für jede Medienabfrage nach Bedarf

 @media(min-width: 768px){ .col-1-5{ width: 20%; float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; } } 
col 1
col 2
col 3
col 4
col 5

Hier ist eine funktionierende Demo https://codepen.io/giorgosk/pen/BRVorW

Bootstrap 4, variable Anzahl von Spalten pro Zeile

Wenn Sie bis zu fünf Spalten pro Zeile haben möchten, so dass weniger Spalten immer nur 1/5 der Zeilen belegen, sollten Sie die Mixins von Bootstrap 4 verwenden:

SCSS:

 .col-2-4 { @include make-col-ready(); // apply standard column margins, padding, etc. @include make-col(2.4); // 12/5 = 2.4 } 

HTML:

 
1 of 5
2 of 5
3 of 5
4 of 5
5 of 5
1 of 2
2 of 2
 .col-xs-2-4 { position: relative; float: left; width: 20%; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-sm-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .col-sm-2-4 { float: left; width: 20%; } } .col-md-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .col-md-2-4 { float: left; width: 20%; } } .col-lg-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .col-lg-2-4 { float: left; width: 20%; } } 

Für Twitter Bootstrap 3 ist dies der einfachste Weg, dies zu erreichen:

 

Eine Improvisation auf der @ lightswitch-Antwort, wenn wir ein 5-Spalten-Gitter mit LESS-Iterationen benötigen

 .make-fifth-col(@index) when (@index > 0) { @class-name: ~".col-md-5th-@{index}"; @{class-name} { .make-md-column(1.2*@index); } .make-fifth-col(@index - 1); } .make-fifth-col(10); 

Dies erzeugt .col-md-5th-1, col-md-5th-2, col-md-5th-3, classn .col-md-5th-1, col-md-5th-2, col-md-5th-3, usw., was 10% , 20% , 30% … entspricht