Пять равных столбцов в Twitter bootstrap

Question

Пять равных столбцов в Twitter bootstrap

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

является ли сетка из пяти столбцов, демонстрируемая выше части фреймворка bootstrap twitter?

309

bootstrap-4 twitter-bootstrap twitter-bootstrap-3

автор: Martin Lindgren

30 ответов

автор: jkofron.e · Accepted Answer · 2013-09-06 23:10:10

используйте пять divs с классом span2 и дайте первому классу 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>

вуаля! Пять равномерно расположенных и центрированных колонн.

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

автор: Fizzix · Accepted Answer · 2017-06-19 04:59:29

для 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>

РАБОЧАЯ ДЕМО

автор: lightswitch05 · Accepted Answer · 2015-08-12 19:27:51

на Bootstrap 3, если вы хотите шириной и LESS, SASS, или нечто подобное, все, что вам нужно сделать, это использовать функции миксина Bootstrap make-md-column, make-sm-column, etc.

минус:

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

Сасс:

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

Сасс:

.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 что совершенно справедливо, но это изменяет ширину столбца ядра для всего bootstrap. Использование вышеуказанных функций mixin добавит макет столбца 5 поверх столбцов начальной загрузки по умолчанию, поэтому он не сломает никакие сторонние инструменты или существующий стиль.

автор: plaidcorp · Accepted Answer · 2014-02-19 00:17:52

Ниже приведена комбинация ответов @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%;
    }
}

автор: machineaddict · Accepted Answer · 2015-05-22 07:35:36

сохраните исходный загрузочный файл с 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/

автор: Zim · Accepted Answer · 2018-06-18 19:15:52

обновить 2018

Bootstrap 4.0

вот 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 colums обернуть в пределах того же .row используя разрыв clearfix, такой как <div class="col-12"></div> или <div class="w-100"></div> каждые 5 столбцы.

Смотрите также: Bootstrap-5 расположение столбцов

автор: Pavlo · Accepted Answer · 2014-01-21 04:23:55

создайте пользовательскую загрузку Bootstrap для макета 5 столбцов

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

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

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

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

автор: DraggonZ · Accepted Answer · 2015-03-18 12:17:26

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

автор: caub · Accepted Answer · 2016-09-01 09:35:56

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

автор: Studio4 · Accepted Answer · 2014-05-02 15:40:22

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

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

автор: Mafnah · Accepted Answer · 2013-05-13 16:32:58

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

автор: agDev · Accepted Answer · 2016-05-08 20:48:14

создайте 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>

автор: Nipson · Accepted Answer · 2014-07-25 21:42:56

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

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

автор: bradrice · Accepted Answer · 2014-03-12 14:36:42

Это можно сделать с вложенностью и с помощью небольшой 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

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

автор: vitro · Accepted Answer · 2017-05-23 12:02:49

на мой взгляд, лучше использовать его так с меньшим синтаксисом. Этот ответ основан на ответ от @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 */

автор: Henning Fischer · Accepted Answer · 2015-06-17 14:33:21

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

Так же:

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

и CSS:

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

автор: byteC0de · Accepted Answer · 2015-12-21 04:32:19

по умолчанию 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>

автор: nicolallias · Accepted Answer · 2017-03-01 16:38:10

решение, которое не требует много CSS, ни настройки bootstrap по умолчанию 12col layout:

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

автор: guaph · Accepted Answer · 2015-07-08 09:10:36

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

автор: Robind Kumar · Accepted Answer · 2015-09-17 10:14:54

Как вы можете добавить 5 столбцов сетки в 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>

автор: Manish Verma · Accepted Answer · 2016-02-28 18:32:39

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

автор: Vikas Baru · Accepted Answer · 2016-03-02 06:53:40

самым простым решением без необходимости редактирования 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. Надеюсь, это кому-то поможет.

автор: gonatee · Accepted Answer · 2016-05-08 18:07:17

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

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

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-grids способен обслуживать более 90% случаев использования - так что давайте спроектировать таким образом-развиваться проще!

хороший учебник flex здесь"https://css-tricks.com/snippets/css/a-guide-to-flexbox/"

автор: Nulen · Accepted Answer · 2016-06-06 13:09:56

Я создал определения Sass mixin на основе определений bootstrap для любого количества столбцов (лично рядом с 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);
  }

}

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

автор: Sanjib Debnath · Accepted Answer · 2016-07-12 09:13:38

5 столбцов макет с Twitter Bootstrap style

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

автор: GiorgosK · Accepted Answer · 2017-11-03 12:42:16

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

@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

автор: daGUY · Accepted Answer · 2018-05-29 15:24:53

Bootstrap 4, переменное количество столбцов в строке

если вы хотите до пять столбцов в строке, так что меньшее количество столбцов по-прежнему занимает только 1/5 строки каждый, решение заключается в использовании Bootstrap 4-х mixins:

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>

автор: Vedmant · Accepted Answer · 2018-06-09 09:43:34

кто-то использует bootstrap-sass( v3), вот простой код для 5 столбцов, использующих bootstrap mixings:

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

автор: Aroos · Accepted Answer · 2014-12-22 09:38:20

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

автор: paulalexandru · Accepted Answer · 2015-01-21 13:45:01

для 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%;">