Fünf gleiche Spalten im Twitter-Bootstrap

361

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?

Gandalf
quelle
Sie sehen eine sehr alte Version des Bootstraps. Möchten Sie ein 5-spaltiges "responsives" Raster auf dem (neuesten, ich hoffe) Bootstrap haben?
Andres Ilich
3
Ich habe gerade festgestellt, dass. Die angegebene ist v1.3.0 und die aktuelle ist 2.0.2. Die neueste Version ist ein 12-Spalten-Raster, was bedeutet, dass ich 2,3,4 und 6 gleiche Spalten haben kann. Was ich gefragt habe, ist, wenn Es wäre möglich, 5 gleiche Spalten zu haben, ohne viele Dinge ändern zu müssen.
Gandalf
Sie können, ja, aber es werden umfangreiche Änderungen an einigen der Gitterelemente und auch an den ansprechenden Gitterelementen erforderlich sein. Reagiert Ihre Website überhaupt? Es wäre ein bisschen einfacher, auf diese Weise eine Antwort zu finden, sonst wäre es viel Code.
Andres Ilich
Ja, die Seite reagiert, aber ich müsste auch die Rasterelemente ändern, nicht den ansprechenden Teil nur imho.
Gandalf
1
Ich habe einige Erfolge * mit .container.one-5th.column {width: 17%; } obwohl ich erwarte, dass mir etwas Schreckliches den Atem raubt.17.87847% auch.
Gandalf

Antworten:

406

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

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila! Fünf gleich beabstandete und zentrierte Säulen.


In Bootstrap 3.0 würde dieser Code so aussehen

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>
jkofron.e
quelle
44
es geht nicht in voller Breite. es ist aber schön
machineaddict
45
Die Lösung, die ich gepostet habe, ist in voller Breite und erstellt 5 gleiche Spalten: HIER IST DIE ANTWORT .
Fizzix
5
Geht nicht in voller Breite, wie die Antwort, die @fizzix unten liefert. Macht einen unerwünschten Rand auf beiden Seiten, wie so - jsfiddle.net/wdo8L1ww
Fizzix
3
Spalten sehen mit dieser Lösung eher klein aus, daher bevorzuge ich die @ fizzix-Lösung
dc2009
2
Bootstrap 4 5 cols (volle Breite) erfordert kein CSS oder SASS: stackoverflow.com/a/42226652/171456
Zim
526

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.cssDokuments 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 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:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

ARBEITSDEMO - Erweitern Sie den Rahmen, damit die Spalten reagieren.

EINE ANDERE DEMO - Einbindung der neuencol-*-5thsKlassen in andere wiecol-*-3undcol-*-2. Ändern Sie die Größe des Rahmens, um zu sehen, wie sich allecol-xs-6in 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:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

ARBEITSDEMO

Fizzix
quelle
1
Sie anzurufen col-*-15könnte verwirrend sein. Es scheint zu implizieren, dass sie Teil eines 15-Spalten-Rastersystems sind, was sie nicht sind.
Paul D. Waite
2
@ PaulD.Waite - Ich habe meiner Antwort eine kleine Notiz hinzugefügt, um die Leute wissen zu lassen.
Fizzix
2
col-*-15ist in Ordnung mit mir, col-*-5thskönnte aber ein etwas weniger verwirrender Spaltenname sein. Das ist es, was ich benutze, damit meine anderen Entwickler nicht verwirrt zu mir kommen.
Mordred
3
Hey @scragar - Wenn Sie das Styling für alle aktuellen Spaltenklassen von Bootstrap anzeigen, werden Sie feststellen, dass sie alle enthalten 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 :)
Fizzix
1
Wie wäre es mit einer Benennung für eine 2/5 Spalte? Oder sollten wir verwenden: col-md-1ths für 1/5 und col-md-2ths für 2/5, col-md-5ths für 5/5 = volle Breite?
Alex
166

Für Bootstrap 3 , wenn Sie wollen , in voller Breite und verwenden LESS, SASSoder etwas ähnliches, alles , was Sie tun müssen, ist , nutzen Bootstrap der mixin Funktionen make-md-column , make-sm-columnusw.

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

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:

.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 sprechen von einer Einstellung, @gridColumnsdie 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.

Lichtschalter05
quelle
5
Die sauberste Lösung, wie 2.4eine fünfte von 12 ( 2.4*5=12), funktioniert für Bootstrap 3 in einem 12-Spalten-Raster. Gilt auch für make-xs, make-smaber es funktioniert nicht in Kombination mit anderen Standard-Col-Definitionen (letzte Priorität erhalten)
Sherbrow
6
Ich bin schockiert über die vergleichsweise wenigen positiven Stimmen für diese Antwort. Es ist bei weitem am wenigsten hackig, da es nicht nur dieselbe Namenskonvention wie andere Bootstrap-Spaltenklassen verwendet, sondern auch dieselben Mixins, mit denen Bootstrap seine eigenen Spalten erstellt, was es wahrscheinlich zumindest bis Bootstrap 4 zukunftssicher macht.
Chris Fritz
3
Dies soll die beste Antwort sein. Ich habe eine Bibliothek erstellt (einschließlich offset, pullund push) auf dieser Basis für den eigenen Gebrauch. Fühlen Sie sich frei, es auszuprobieren
Kenny Ki
1
Wie jeder gesagt hat, ja, das ist jetzt die richtige Antwort. @Sherbrow sagte, dass sie "nicht in Kombination mit anderen Standard-Col-Definitionen funktionieren werden", aber dies liegt nicht daran, dass diese Lösung in irgendeiner Weise falsch ist, sondern einfach daran, dass 12% 5! = 0.
Nick M
2
@lightswitch05 Leider war das nicht für mich geeignet, da ich eine dynamische Anzahl von Spalten hatte. Wenn ich nur eine Spalte hätte, wollte ich immer noch, dass es ein Fünftel des Bildschirms ist, aber mit Fizzix 'Antwort würde eine einzelne Spalte den gesamten Bildschirm abdecken. Ich habe es geschafft, es mit den neuen Bootstrap 4 Mixin-Funktionen zu lösen. Ich könnte Ihre Antwort aktualisieren, um dies aufzunehmen, wenn Sie möchten?
Plog
40

Update 2019

Bootstrap 4.1+

Hier sind 5 gleiche Spalten voller Breite ( kein zusätzliches CSS oder SASS ), die das Auto-Layout-Raster verwenden :

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

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

Diese Lösung funktioniert, da Bootstrap 4 jetzt Flexbox ist. Sie können die 5 Spalten .rowmit 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

Zim
quelle
2
Ich kann es kaum erwarten, dass es stabil ist :)
nicolallias
2
Gut, funktioniert aber nur mit Reihen von 5 Elementen. Wenn Sie mehr bekommen, liegen Sie falsch. Sehen Sie meine enhenced Geige hier: jsfiddle.net/djibe89/ntq8h910
djibe
Deshalb habe ich erklärt, dass Sie die Pause alle 5 Spalten verwenden müssen. Ihre Lösung funktioniert, erfordert jedoch zusätzliches CSS.
Zim
Erwägen Sie auch das Hinzufügen flex-nowrapzu, .rowda die (automatischen) Spalten die übergeordnete Breite überschreiten können.
Luuk Skeur
31

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

@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%;
    }
}
Plaidcorp
quelle
Wo platziere ich das und wie verwende ich es?
Serggserg
1
@Serg 1. Platzieren Sie es unter / nach der Bootstrap-CSS-Datei. 2. Fügen Sie die .fivecolumns-Klasse zur .row hinzu und verschachteln Sie dann fünf Spalten mit der Klasse .col [, - sm, -lg] -2
plaidcorp
Geht in einigen Fällen nicht perfekt in voller Breite.
Fizzix
Warum wird col-xs-2 nicht zu den Deklarationen hinzugefügt?
Ganders
@ganders nur ein Überblick; Schauen
plaidcorp
27

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:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

Und das HTML:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>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. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

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/

machineaddict
quelle
10

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

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

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

DraggonZ
quelle
9

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

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

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

Pavlo
quelle
7

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

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

caub
quelle
Flexbox ist besser als Bootstrap, wenn es Ihren Anforderungen entspricht.
ml242
6

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.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}
Studio4
quelle
1
Die tatsächliche Breite beträgt 17,94872% und reagiert nicht. Sie müssen für jede Spalte in allen @ media-Abfragen einen neuen Rand festlegen.
Machineaddict
5
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}
Mafnah
quelle
1
das sollte gleich sein. span2 {width: 20%; }
Studio4
... und es funktioniert NICHT. Jede Spalte mit Ausnahme der ersten hat noch einen Rand.
Machineaddict
5

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

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
agDev
quelle
5

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:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>
daGUY
quelle
4

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-columnsvon 12bis 20. Dann können Sie sowohl 4 als auch 5 Spalten erstellen.

Nipson
quelle
3

Dies kann durch Verschachteln und Verwenden eines kleinen CSS-Overrides erfolgen.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->

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: Beispiel für 5 gleiche Spalten

Und hier ist mein vollständiger Bericht über Coderwall

Fünf gleiche Spalten in Bootstrap 3

Bradrice
quelle
3

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.

/*
 * 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 */
in vitro
quelle
3

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

.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

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
byteC0de
quelle
3

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

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
Manish Verma
quelle
3

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;
    }
}
Sanjib Debnath
quelle
3

Eine Lösung, die weder viel CSS erfordert noch das Standard-12-Colol-Layout des Bootstraps optimiert:

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

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

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

Erstellen Sie einfach eine neue Klasse und definieren Sie ihr 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;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

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

GiorgosK
quelle
2

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

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

und CSS

.this_row {
    margin: 0 -5%;
}
Guaph
quelle
2

So können Sie im Bootstrap ein 5-Spalten-Raster hinzufügen

.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;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Robind Kumar
quelle
2

Die einfachste Lösung, ohne CSS bearbeiten zu müssen, wäre:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

Und wenn Sie diese benötigen, um über einen Haltepunkt hinaus zu brechen, machen Sie einfach einen BTN-Gruppenblock. Hoffe das hilft jemandem.

Vikas Baru
quelle
2

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

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

In einfachen Worten, ich benutze

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

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/ ".

Gonatee
quelle
2

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

// 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 Klassen 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, jemand wird es nützlich finden

Nulen
quelle
2

Wenn jemand Bootstrap-Sass (v3) verwendet, ist hier einfacher Code für 5 Spalten mit Bootstrap-Mischungen:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Stellen Sie sicher, dass Sie Folgendes angegeben haben:

@import "bootstrap/variables";
@import "bootstrap/mixins";
Vedmant
quelle
1
danke, das war es, wonach ich gesucht habe, ich habe jetzt auch 1-5ths 2-5ths usw. und sogar 3-10ths usw. gemacht, um mehr Flexibilität zu haben, sehr praktisch
morksinaanab
2

Für Bootstrap 4.4+

Verwenden Sie die brandneuen row-cols-nKlassen.

  1. Fügen Sie row-cols-5Ihrem .rowdiv Klasse hinzu . Kein benutzerdefiniertes CSS erforderlich.
  2. In der 4.4-Dokumentation finden Sie Zeilen-Spalten: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Für Bootstrap 4-Versionen vor Bootstrap 4.4

  1. Kopieren Sie das unten stehende CSS (fantastisches CSS von Bootstrap-Autoren) und fügen Sie es Ihrem Projekt hinzu

  2. 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%}}

djibe
quelle
1

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

Aroos
quelle