Dla Bootstrap 3 i nowszych

Fantastyczny pełna szerokość 5 układ kolumn z Twitter Bootstrap został stworzony tutaj .

Jest to zdecydowanie najbardziej zaawansowane rozwiązanie, ponieważ działa bezproblemowo z Bootstrap 3. Pozwala na wielokrotne używanie klas w parze z bieżącymi klasami Bootstrap w celu responsywnego projektowania.

CSS:
Dodaj to do globalnego arkusza stylów, a nawet na dole bootstrap.css dokument.

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

Użyj go!
na przykład, jeśli chcesz utworzyć element div, który zachowuje się jak układ pięciu kolumn na średnich ekranach i jak dwie kolumny na mniejszych, musisz użyć czegoś takiego:

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

Demo robocze - rozwiń ramkę, aby kolumny stały się responsywne.

Kolejne DEMO - włączenie nowych klas col-*-5ths do innych, takich jak col-*-3 i col-*-2. Zmień rozmiar ramki, aby zobaczyć wszystkie zmieniają się na col-xs-6 w widoku responsywnym.

Dla Bootstrap 4

Bootstrap 4 używa teraz domyślnie flexbox, dzięki czemu masz dostęp do jego magicznych mocy od razu po wyjęciu z pudełka. Sprawdź kolumny auto layout , które dynamicznie dostosowują szerokość w zależności od liczby zagnieżdżonych kolumn.

Oto przykład:

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

DEMO ROBOCZE

Dla Bootstrap 3 , Jeśli chcesz pełnej szerokości i używasz LESS, SASS, lub coś podobnego, wystarczy skorzystać z funkcji Mixin Bootstrap make-md-column, make-sm-column, itd.

Mniej:

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

Nie tylko możesz zbudować prawdziwe klasy kolumn Bootstrap o pełnej szerokości używając tych mixinów, ale możesz również zbudować wszystkie powiązane klasy pomocnicze, takie jak .col-md-push-*, .col-md-pull-*, oraz .col-md-offset-*:

Mniej:

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

Inne odpowiedzi mówią o ustawieniu @gridColumns, które jest całkowicie poprawne, ale zmienia szerokość kolumny rdzenia dla wszystkich bootstrap. Korzystanie z powyższych funkcji Mixin spowoduje dodanie układu kolumn 5 na domyślnych kolumnach bootstrap, więc nie zepsuje żadnych narzędzi innych firm ani istniejących stylizacji.

Poniżej jest kombinacja odpowiedzi @ machineaddict i @Mafnah, napisana ponownie dla Bootstrap 3 (Jak na razie działa dobrze):

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

Zachowaj oryginalny bootstrap z 12 kolumnami, nie dostosowuj go. Jedyną modyfikacją, którą musisz wprowadzić, jest css Po oryginalnego responsywnego css Bootstrap, jak to:

Poniższy kod został przetestowany dla Bootstrap 2.3.2:

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

I 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>

Uwaga: mimo że rozpiętość 2 razy 5 nie równa się 12 kolumnom, masz pomysł:)

Przykład pracy można znaleźć tutaj http://jsfiddle.net/v3Uy5/6/

Aktualizacja 2018

Bootstrap 4.0

Oto 5 równych kolumn o pełnej szerokości (bez dodatkowych CSS lub SASS ) przy użyciu Auto-layout grid :

<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

To rozwiązanie działa, ponieważ Bootstrap 4 jest teraz flexbox. Możesz uzyskać 5 kolum do zawinięcia w tym samym .row za pomocą podziału clearfix, takiego jak <div class="col-12"></div> lub <div class="w-100"></div> co 5 kolumn.

Zobacz też: Bootstrap-5 układ kolumn

Tworzenie niestandardowego pobrania Bootstrap dla układu 5 kolumn

Przejdź do strony dostosowywania Bootstrap 2.3.2 (lub Bootstrap 3) i ustaw następujące zmienne (nie wprowadzaj średników):

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

Pobierz swoją kompilację. Ta siatka zmieściłaby się w domyślnych pojemnikach, zachowując domyślne szerokości rynny (prawie).

Uwaga: Jeśli używasz mniej, zaktualizuj variables.less.

Jeśli nie potrzebujesz dokładnej tej samej szerokości kolumn, możesz spróbować utworzyć 5-kolumny używając zagnieżdżenia:

<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

Pierwsze dwie kolumny będą miały szerokość równą 5/12 * 1/2 ~ 20,83%

Ostatnie trzy kolumny: 7/12 * 1/3 ~ 19.44%

Taki hack daje akceptowalny wynik w wielu przypadkach i nie wymaga żadnych zmian CSS(używamy tylko natywnych klas bootstrap).

Z 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>

Głosowałem na odpowiedź Mafnah, ale patrząc na to jeszcze raz sugeruję, że poniżej jest lepiej, jeśli zachowujesz domyślne marginesy itp.

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

Utwórz 5 elementów za pomocą klasy col-sm-2 i dodaj do pierwszego elementu również klasę col-sm-offset-1

P. s. nie będzie to pełna szerokość (będzie trochę wcięta z prawej i lewej strony ekranu)

Kod powinien wyglądać mniej więcej tak

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

Innym sposobem włączenia 5 kolumn w Bootstrap 3 jest zmodyfikowanie formatu 12 kolumn używanego domyślnie przez Bootstrap. Następnie utwórz siatkę 20 kolumn (użyj dostosuj na stronie Bootstrap lub użyj wersji LESS/SASS).

Aby dostosować stronę bootstrap, przejdź do strony Dostosuj i pobierz stronę , zaktualizuj zmienną @grid-columns z 12 do 20. Wtedy będziesz mógł utworzyć 4, a także 5 kolumn.

Można to zrobić za pomocą zagnieżdżania i przy użyciu trochę css over-ride.

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

Potem jakiś css

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

div.col-sm-5.five-two {
width: 40% !important;
}

}

Oto przykład: 5 przykład równych kolumn

A oto mój pełny zapis na coderwall

Pięć równych kolumn w bootstrap 3

Moim zdaniem lepiej używać go w ten sposób z mniejszą składnią. Ta odpowiedź jest oparta na odpowiedzi z @fizzix

W ten sposób kolumny używają zmiennych (@grid-gutter-width, media breakpoints), które użytkownik może przesłonić, a zachowanie pięciu kolumn pasuje do zachowania siatki 12 kolumn.

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

This is awesome: http://www.ianmccullough.net/5-column-bootstrap-layout/

Po prostu zrób:

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

I CSS:

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

Domyślnie Bootstrap nie zapewnia systemu siatki, który pozwala nam stworzyć układ pięciu kolumn, musisz utworzyć domyślną definicję kolumn w taki sposób, jak robi to Bootstrap tworzenie niestandardowych klas i zapytań o media w pliku css

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

I jakiś kod html

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

Rozwiązanie, które nie wymaga dużo CSS, ani poprawiania Bootstrap domyślny układ 12col:

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

W bootstrap 3, myślę, że możemy zrobić coś takiego, aby usunąć lewy i prawy margines:

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

I CSS

.this_row {
    margin: 0 -5%;
}

Jak dodać siatkę 5 kolumn w bootstrap

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

Bootstrap domyślnie może skalować do 12 kolumn? Oznacza to, że jeśli chcemy stworzyć 12-kolumnowy układ o jednakowej szerokości, zapisywalibyśmy wewnątrz div class="col-md-1" dwanaście razy.

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

Najprostszym rozwiązaniem bez potrzeby edycji CSS byłoby:

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

I jeśli potrzebujesz ich do przełamania poza dowolnym punktem przerwania, po prostu zrób blok btn-group. Mam nadzieję, że to komuś pomoże.

Pięć kolumn z założenia nie jest częścią bootstrap.

Ale z Bootstrap v4 (alpha), są 2 rzeczy, które pomogą w skomplikowanym układzie siatki

1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/), Nowy Typ elementu (oficjalny- https://www.w3.org/TR/css-flexbox-1/)
2. Responsive utilities (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

Mówiąc prosto, jestem using

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

The nice Flex tutorial is here " https://css-tricks.com/snippets/css/a-guide-to-flexbox/"

Stworzyłem definicje SASS mixin na podstawie definicji bootstrap dla dowolnej liczby kolumn (osobiście obok 12 używam 8, 10 i 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);
}

I możesz po prostu utworzyć klasy przez:

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

}

Mam nadzieję, że komuś się przyda

5 układ kolumn w stylu Twitter Bootstrap

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

Po prostu utwórz nową klasę i zdefiniuj jej zachowanie dla każdego zapytania o media w razie potrzeby

@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>

Oto działające demo https://codepen.io/giorgosk/pen/BRVorW

Bootstrap 4, zmienna liczba kolumn w wierszu

Jeśli chcesz mieć maksymalnie pięć kolumn w wierszu, tak aby mniejsza liczba kolumn nadal zajmowała tylko 1/5 wiersza, rozwiązaniem jest użycie mixinów :

SCSS:

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

HTML:

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

Czy ktoś używa Bootstrap-sass (v3), Oto prosty kod dla 5 kolumn z użyciem mieszanek bootstrap:

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

Upewnij się, że uwzględniłeś:

@import "bootstrap/variables";
@import "bootstrap/mixins";

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

Dla Twittera bootstrap 3 jest to najprostszy sposób, aby to osiągnąć:

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">