Для Bootstrap 3 и выше

Фантастическая полная ширина 5 колонок с помощью Twitter Bootstrap была создана здесь.

Это, безусловно, самое современное решение, так как оно легко работает с Bootstrap 3. Оно позволяет повторно использовать классы снова и снова, в паре с текущими классами Bootstrap для гибкого дизайна.

CSS:
Добавьте это в свою таблицу стилей или даже в нижнюю часть документа bootstrap.css.

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

Положите его на использование!
Например, если вы хотите создать элемент div, который ведет себя как макет пяти столбцов на средних экранах и как два столбца на более мелких, вы просто нужно использовать что-то вроде этого:

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

РАБОЧИЙ ДЕМО - Разверните рамку, чтобы увидеть, как столбцы становятся отзывчивыми.

ДРУГОЙ ДЕМО - включение новых классов col-*-5ths с другими, такими как col-*-3 и col-*-2, Измените размер кадра, чтобы увидеть, как все они меняются на col-xs-6 в ответном виде.

Для Bootstrap 4

Bootstrap 4 теперь использует flexbox по умолчанию, поэтому вы получаете доступ к своим магическим силам прямо из коробки. Ознакомьтесь с автомастерами, которые динамически изменяют ширину в зависимости от того, сколько столбцов вложен.

Вот пример:

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

РАБОЧИЙ ДЕМО

Для Bootstrap 3, если вы хотите полноразмерную и используете LESS, SASS или что-то подобное, все, что вам нужно сделать, это использовать Функции загрузки Bootstrap make-md-column, make-sm-column и т.д.

LESS:

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

Вы можете создавать не только истинные полноразмерные классы столбцов начальной загрузки, но и вы можете создавать все связанные классы-помощники, например .col-md-push-*, .col-md-pull-* и .col-md-offset-*:

LESS:

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

В других ответах рассказывается о настройке @gridColumns, которая является абсолютно допустимой, но которая изменяет ширину столбца ядра для всех загрузочных файлов. Использование вышеперечисленных функций mixin добавит 5 компоновки столбцов поверх столбцов начальной загрузки, поэтому он не нарушит никаких сторонних инструментов или существующего стиля.

Ниже приведена комбо ответов @machineaddict и @Mafnah, переписанная для Bootstrap 3 (хорошо работающая для меня до сих пор):

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

Сохраните исходный бутстрап с 12 столбцами, не настраивайте его. Единственная модификация, которую вам нужно сделать, - это css после исходный bootstrap отзывчивый css, например:

Следующий код был протестирован для 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>

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

Примечание:. Хотя span2 раз 5 не равно 12 столбцам, вы получаете идею:)

Рабочий пример можно найти здесь http://jsfiddle.net/v3Uy5/6/

Если вам не нужна точная та же ширина столбцов, вы можете попробовать создать 5-столбцы с помощью вложенности:

<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

Первые два столбца будут иметь ширину, равную 5/12 * 1/2 ~ 20.83%

Последние три столбца: 7/12 * 1/3 ~ 19.44%

Такой хак дает приемлемый результат во многих случаях и не требует каких-либо изменений CSS (мы используем только родные классы начальной загрузки).

Создайте пользовательский загрузочный загрузочный файл для размещения 5 столбцов

Перейдите на страницу Bootstrap 2.3.2 (или Bootstrap 3) и установите следующие переменные ( не вводите точки с запятой):

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

Загрузите свою сборку. Эта сетка будет помещаться в контейнеры по умолчанию, сохраняя ширину по умолчанию для желобов (почти).

Примечание.. Если вы используете LESS, обновите variables.less.

Простой с Bootstrap 4..

Вот 5 равных колонок полной ширины (без дополнительных CSS или SASS), используя сетку автомакетов..

<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

Это решение работает, потому что Bootstrap 4 теперь flexbox. Вы можете получить 5 колонок для обертывания в том же .row с использованием clearfix break, такого как <div class="col-12"></div> или <div class="w-100"></div>, всего 5 столбцов.

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

Я проголосовал за ответ Мафны, но, глядя на это снова, я предлагаю следующее лучше, если вы сохраняете поля по умолчанию и т.д.

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

Создайте 5 элементов с классом col-sm-2 и добавьте к первому элементу также класс col-sm-offset-1

P.s. это будет не полная ширина (она будет слегка отступать справа и слева от экрана)

Код должен выглядеть примерно так:

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

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

По умолчанию Bootstrap не предоставляет grid-систему, которая позволяет нам создавать макет пяти столбцов, вам нужно создать определение столбца по умолчанию таким образом, чтобы Bootstrap создайте некоторые пользовательские классы и медиа-запросы в вашем файле 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;
    }
}

и некоторый html-код

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

Это потрясающе: http://www.ianmccullough.net/5-column-bootstrap-layout/

Просто выполните:

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

И CSS:

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

По-моему, лучше использовать его с меньшим синтаксисом. Этот ответ основан на answer от @fizzix

В этом случае столбцы используют переменные (@grid-gutter-width, media breakpoints), которые пользователь может переопределить, а поведение пяти столбцов соответствует поведению из 12 столбцов.

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

Другой способ включить 5 столбцов в Bootstrap 3 - изменить формат 12 столбцов, используемый по умолчанию Bootstrap. А затем создайте сетку из 20 колонок (используйте настройку на веб-сайте Bootstrap или используйте версию LESS/SASS).

Чтобы настроить на сайте начальной загрузки, перейдите на страницу Настроить и загрузить", обновите переменную @grid-columns от 12 до 20. Затем вы сможете создать 4, а также 5 столбцов.

Это можно сделать с помощью вложенности и использования небольшого css-перехода.

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

Тогда некоторый css

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

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

}

Вот пример: 5 равный пример столбца

И вот моя полная запись на coderwall

Пять равных столбцов в бутстрапе 3

Решение, которое не требует большого количества CSS, а также не настраивает макет по умолчанию 12colout для начальной загрузки:

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

5 расположение колонок с типом бутстрапа Twitter

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

Пять столбцов явно не являются частью бутстрапа по дизайну.

Но с помощью Bootstrap v4 (alpha) есть две вещи, которые могут помочь со сложной сеткой.

• Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/), новый тип элемента (официальный - https://www.w3.org/TR/css-flexbox-1/)
• Отзывчивые утилиты (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

Проще говоря, я использую

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

Будь то 5,7,9,11,13 или что-то странное, все будет хорошо. Я вполне уверен, что стандарт 12-гридов способен обслуживать более 90% используемого варианта - так что пусть дизайн таким образом - тоже станет проще!

Хорошее руководство по гибкости здесь "https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Самое простое решение без необходимости редактирования CSS:

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

И если вам нужны эти, чтобы выйти за пределы точки останова, просто сделайте блок btn-group. Надеюсь, это поможет кому-то.

Загрузочный лоток по умолчанию может масштабировать до 12 столбцов? Это означает, что если мы хотим создать 12-колоночную раскладку равной ширины, мы будем писать внутри 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 колонок в бутстрап

.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 3, я думаю, мы можем сделать что-то подобное, для удаления левого и правого полей:

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

и CSS

.this_row {
    margin: 0 -5%;
}

Просто создайте новый класс и определите его поведение для каждого каждого медиа-запроса по мере необходимости

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

вот рабочая демонстрация https://codepen.io/giorgosk/pen/BRVorW

Бутстрап или другая система сетки, это не всегда означает, что все проще и лучше. Внутри вашего .container или .row(чтобы сохранить ваш отзывчивый макет), вы можете просто создать 5 div (с классом .col f.e.) и добавить css вот так:
.col { width: 20%; float: left };

Я создал определения смешивания SASS на основе определений бутстрапов для любого количества столбцов (лично около 12 я использую 8, 10 и 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);
}

И вы можете просто создавать классы с помощью:

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

}

Я надеюсь, что кто-то найдет это полезным

Вы можете использовать небольшой трюк, чтобы сделать col-md-2 с полным решением решения смещения. Он использует способ, которым bootstrap делает, чтобы удалить (скрыть) 15px paddings.

Я имею в виду добавление полей "-". На самом деле calc (-10% - 15px); поля для обеих сторон. (10% - ширина смещения и 15 пикселей для заполнения).

Единственный минус: он будет прокручивать страницу по горизонтали, поэтому вам понадобится переполнение-x: скрытое в родительском ряду строки.

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

Вот демонстрация: http://jsfiddle.net/sct3j/171/

система сетки бутстрапа разделилась на 12 сетках. Поэтому я разделил ее на две сетки (7 + 5). Эти 7 и 5 также содержат полные 12 grid.Thats почему я расстался 7 (4 + 4 + 4) и 5 (6 + 6), поэтому он займет все содержимое, просто

HTML

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

CSS

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

Импровизация на @lightswitch отвечает, если нам нужна 5-колонная сетка, использующая МЕНЬШИЕ итерации

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

Это создаст классы css .col-md-5th-1, col-md-5th-2, col-md-5th-3, и так далее, что соответствует 10%, 20%, 30%... соответственно

Для twitter bootstrap 3 это самый простой способ добиться этого:

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

var cols = $(".container .item").length;
if (cols == 5){
    $('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
 }

JQuery и Готово! Framework!