Я хочу иметь 5 одинаковых столбцов на странице, которую я создаю, и я не могу понять, как здесь используется 5-ти столбчатая сетка: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
Является ли пятисеточная сетка демонстрируемой над частью рамки бутстрапа twitter?
Используйте пять div с классом 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>
Voila! Пять одинаково разнесенных и центрированных столбцов.
В 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>
Фантастическая полная ширина 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 теперь использует 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 компоновки столбцов поверх столбцов начальной загрузки, поэтому он не нарушит никаких сторонних инструментов или существующего стиля.
Bootstrap 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 теперь является flexbox. Вы можете получить 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 »</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 »</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 »</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 »</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 »</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>
Первые два столбца будут иметь ширину, равную 5/12 * 1/2 ~ 20.83%
Последние три столбца: 7/12 * 1/3 ~ 19.44%
Такой хак дает приемлемый результат во многих случаях и не требует каких-либо изменений CSS (мы используем только родные классы начальной загрузки).
Перейдите на страницу Bootstrap 2.3.2 (или Bootstrap 3) и установите следующие переменные ( не вводите точки с запятой):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
Загрузите свою сборку. Эта сетка будет помещаться в контейнеры по умолчанию, сохраняя ширину по умолчанию для желобов (почти).
Примечание.. Если вы используете LESS, обновите variables.less.
С 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%;
}
<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
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>
Другой способ включить 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
По-моему, лучше использовать его с меньшим синтаксисом. Этот ответ основан на 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 */
Это потрясающе: http://www.ianmccullough.net/5-column-bootstrap-layout/
Просто выполните:
<div class="col-xs-2 col-xs-15">
И CSS:
.col-xs-15{
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>
Загрузочный лоток по умолчанию может масштабировать до 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 расположение колонок с типом бутстрапа 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, а также не настраивает макет по умолчанию 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*/
}
}
Просто создайте новый класс и определите его поведение для каждого каждого медиа-запроса по мере необходимости
@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
Если вы хотите иметь до пяти столбцов в ряд, так что меньшее число столбцов до сих пор занимает только 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>
В 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%;
}
Как добавить 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-group. Надеюсь, это поможет кому-то.
Пять столбцов явно не являются частью бутстрапа по дизайну.
Но с помощью Bootstrap v4 (alpha) есть две вещи, которые могут помочь со сложной сеткой.
Проще говоря, я использую
<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 на основе определений бутстрапов для любого количества столбцов (лично около 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";
.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%;
}
}Для 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%;">