Я хочу мати 5 рівних стовпців на сторінці, яку я будую, і я не можу зрозуміти, як використовується сітка з 5 стовпцями тут: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / інструменти / завантажувальний / адаптивний

Чи демонструється сітка п’яти стовпців над частиною рамки завантажувального твіттера?

Скористайтеся п’ятьма дивами з класом span2 і дайте першому класу зміщення1.

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

Вуаля! П'ять однаково розташованих і по центру стовпців.

У завантажувальній версії 3.0 такий код буде виглядати

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

Для 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чуйний вигляд.

Для завантажувальної програми 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і т.д.

МЕНШЕ:

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

МЕНШЕ:

.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 макетів стовпців у верхній частині стовпців завантажувальної програми за замовчуванням, тому це не порушить жодних сторонніх інструментів чи існуючих стилів.

Оновлення 2019 року

Завантажувальний пристрій 4.1+

Ось 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 зараз є флексбоком. Ви можете отримати 5 стовпців, які слід завернути в одне і те ж, .rowвикористовуючи перерву, наприклад, <div class="col-12"></div>або <div class="w-100"></div>кожні 5 стовпців.

Також дивіться: Bootstrap - 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 після оригінального 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;

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

Примітка. Якщо ви використовуєте менше, оновіть variables.lessзамість цього.

З флексором 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%;
}

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

Створіть 5 елементів за допомогою класу col-sm-2 та додайте до першого елемента також клас col-sm-offset-1

Ps це буде не на повну ширину (вона буде відрізана трохи праворуч і ліворуч екрана)

Код повинен виглядати приблизно так

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

Запуск 4, змінна кількість стовпців на рядок

Якщо ви хочете мати до п'яти стовпців на рядок, так що менша кількість стовпців все ще займає лише 1/5 ряду кожного, рішенням є використання комбінацій Bootstrap 4 :

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>

Ще один спосіб включити 5 стовпців у Bootstrap 3 - це змінити формат 12 стовпців, який за замовчуванням використовує Bootstrap. А потім створіть сітку з 20 стовпців (використовуйте налаштування на веб-сайті Bootstrap АБО використовуйте версію МЕНШЕ / 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 рівних прикладів стовпців

І ось моя повна запис на кодервал

П'ять рівних стовпців у завантажувальній системі 3

На мою думку, краще використовувати його так із меншим синтаксисом. Ця відповідь заснована на відповіді від @fizzix

Таким чином, стовпці використовують змінні (@ grid-gutter-width, медіа-точки перерви), які користувач може перекрити, а поведінка п'яти стовпців збігається з поведінкою сітки 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 */

Це дивовижно: http://www.ianmccullough.net/5-column-bootstrap-layout/

Просто зробіть:

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

І CSS:

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

За замовчуванням Bootstrap не забезпечує систему сітки, яка дозволяє нам створити макет п'яти стовпців, вам потрібно створити визначення стовпців за замовчуванням так, як 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>

Bootstrap за замовчуванням може масштабувати до 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 стовпців у стилі Bootstrap у 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;
    }
}

Рішення, яке не потребує великої кількості CSS, а також налаштування макета 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*/
  }
}

Просто створіть новий клас та визначте його поведінку для кожного медіа-запиту за потребою

@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

У завантажувальній службі 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%;
}

Як Ви можете додати сітку 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>

найпростішим рішенням без необхідності редагувати 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-групи. Сподіваюся, що це комусь допоможе.

П’ять стовпців явно не є частиною завантажувального дизайну.

Але у Bootstrap v4 (альфа) є дві речі, які допоможуть зі складною схемою сітки

1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), новий тип елементів (офіційний - https://www.w3.org/TR/css-flexbox-1/ )
2. Чуйні утиліти ( 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/ "

Я створив визначення SASS mixin на основі визначень завантаження для будь-якої кількості стовпців (особисто біля 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);
  }

}

Сподіваюся, хтось знайде це корисним

Хтось використовує bootstrap-sass (v3), ось простий код на 5 стовпців із використанням сумішей для завантаження:

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

Переконайтеся, що ви включили:

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

Для Bootstrap 4.4+

Використовуйте абсолютно нові row-cols-nкласи.

1. Додайте row-cols-5клас до свого .rowдіва. Не потрібна спеціальна CSS.
2. Дивіться 4.4 doc тут для рядків-знаків: https://getbootstrap.com/docs/4.4/layout/grid/#row- Column

Для Bootstrap 4 версії до Bootstrap 4.4

1. Скопіюйте CSS нижче (дивовижний CSS авторів Bootstrap) та додайте його до свого проекту

2. Прочитайте наведені вище документи, щоб правильно їх використовувати.

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