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?

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>

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

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.

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

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

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/

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

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.

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>

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

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

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>

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>

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.

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

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 */

Das ist fantastisch: http://www.ianmccullough.net/5-column-bootstrap-layout/

Mach einfach:

<div class="col-xs-2 col-xs-15">

Und CSS:

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

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>

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>

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

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*/
  }
}

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

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

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>

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.

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

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

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

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