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

361

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

Является ли сетка из пяти столбцов, показанная выше, частью платформы начальной загрузки Twitter?

twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— Гэндальф
источник
Вы смотрите на очень старую версию начальной загрузки. Вы хотите иметь 5-колоночную "отзывчивую" сетку на (последней, я надеюсь) начальной загрузке?
— Андрес Ильич
3
Я только что понял, что заявленный v1.3.0 и текущий 2.0.2. Последняя версия - сетка с 12 столбцами, означая, что я могу иметь 2,3,4 и 6 равных столбцов. Что я спрашивал, если было бы возможно иметь 5 одинаковых столбцов без необходимости что-либо менять.
— Гэндальф
Вы можете, да, но это потребует значительных изменений некоторых элементов сетки, а также адаптивных элементов сетки. Ваш сайт вообще отзывчив? Было бы немного проще придумать ответ таким образом, иначе было бы много кода.
— Андрес Ильич
Да, сайт отзывчивый, но мне бы тоже пришлось изменить элементы сетки, а не отзывчивую часть, только imho.
— Гэндальф
1
У меня есть некоторый успех * с .container.one-fif.column {ширина: 17%; } хотя я ожидаю, что что-то ужасное отвлечет меня. 17.87847%.
— Гэндальф

Ответы:

407

Используйте пять 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>

Вуаля! Пять равноотстоящих и центрированных столбцов.

В начальной загрузке 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>
— jkofron.e
источник
44
это не идет на полную ширину. это хорошо, хотя
— machineaddict
45
Решение, которое я разместил, имеет полную ширину и создает 5 одинаковых столбцов: ЗДЕСЬ ОТВЕТ .
— Fizzix
5
Не идет на полную ширину, как ответ @fizzix ниже. Создает нежелательные поля с обеих сторон, например, - jsfiddle.net/wdo8L1ww
— Fizzix
3
с этим решением столбцы выглядят довольно маленькими, поэтому я предпочитаю решение
— @fizzix
2
Bootstrap 4 5 столбцов (полная ширина) не требует CSS или SASS: stackoverflow.com/a/42226652/171456
— Zim
526

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

WORKING DEMO - разверните рамку, чтобы увидеть, как столбцы становятся отзывчивыми.

ДРУГОЕ ДЕМО - Включение новых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>

РАБОЧАЯ ДЕМО

— Fizzix
источник
1
Вызов их col-*-15может сбить с толку. Кажется, это подразумевает, что они являются частью 15-колоночной системы координат, а это не так.
— Пол Д. Уэйт
2
@ PaulD.Waite - я добавил небольшую заметку к своему ответу, чтобы люди знали.
— Fizzix
2
col-*-15хорошо со мной, но col-*-5thsможет быть немного менее запутанным именем столбца. Это то, что я использую, чтобы другие мои разработчики не пришли в замешательство.
— Мордред
3
Привет @scragar - Если вы посмотрите на стили для всех текущих классов столбцов Bootstrap, вы заметите, что они все содержат position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;. По сути, код, который я разместил, просто расширяет его, чтобы они точно соответствовали встроенному стилю Bootstrap. Затем я применяю ширину, 20%чтобы 5 одинаковых столбцов могли поместиться по всей странице. Очень просто :)
— Fizzix
1
как насчет именования колонок 2/5? Или мы должны использовать: col-md-1ths для 1/5 и col-md-2ths для 2/5, col-md-5ths для 5/5 = полная ширина?
— Алекс
166

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

— lightswitch05
источник
5
Самое чистое решение, как 2.4и 5-е из 12 ( 2.4*5=12), работает для Bootstrap 3 в сетке из 12 столбцов. Также относится к make-xs, make-smно это не будет работать в сочетании с другими стандартными определениями col (последний получает приоритет)
— Шерброу
6
Я шокирован сравнительно небольшим количеством голосов за этот ответ. Это, безусловно, наименее хакерский вариант, использующий не только то же соглашение об именах, что и другие классы столбцов Bootstrap, но и те же миксины, которые Bootstrap использует для создания своих собственных столбцов, что делает его, вероятно, перспективным до Bootstrap 4, по крайней мере.
— Крис Фриц
3
Это должен быть лучший ответ. Я создал библиотеку (в том числе offset, pullи push) на основе этого для собственного использования. Не стесняйтесь проверить это
— Кенни Ки
1
Как все говорили, да, теперь это правильный ответ. @Sherbrow сказал, что они «не будут работать в сочетании с другими стандартными определениями col», но это не потому, что это решение каким-то образом неверно, просто потому, что 12% 5! = 0.
— Ник М
2
@ lightswitch05 К сожалению, это не подходило для меня, так как у меня было динамическое количество столбцов. Если бы у меня был только один столбец, я бы все равно хотел, чтобы он был пятым на экране, но, используя ответ Fizzix, один столбец охватил бы весь экран. Мне удалось решить эту проблему с помощью новых миксин-функций Bootstrap 4. Я мог бы обновить ваш ответ, чтобы включить это, если хотите?
— Плог
40

Обновление 2019

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 колонок

— Zim
источник
2
Не могу дождаться, пока он станет стабильным :)
— nicolallias
2
Хорошо, но работает только с рядами из 5 элементов. Если вы получаете больше, вы ошибаетесь. Смотрите мою усиленную скрипку здесь: jsfiddle.net/djibe89/ntq8h910
— djibe
Вот почему я объяснил, что вы должны использовать разрыв каждые 5 столбцов. Ваше решение работает, но требует дополнительного CSS.
— Зим
Также подумайте о добавлении flex-nowrapв, .rowпоскольку (автоматические) столбцы могут превышать родительскую ширину.
— Луук Скеур
31

Ниже приведена комбинация ответов @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%;
    }
}
— plaidcorp
источник
Где я могу разместить это и как мне это использовать?
— sergserg
1
@Serg 1. Поместите его под / после файла Bootstrap css 2. Добавьте класс .fivecolumns в .row, затем вложите пять столбцов с классом .col [, - sm, -lg] -2
— plaidcorp
В некоторых случаях не получается идеальная полная ширина.
— Fizzix
Почему col-xs-2 не добавляется в объявления?
— Гандерс
@Ganders просто из виду; проверьте другой ответ на этой странице: stackoverflow.com/questions/10387740/…
— plaidcorp
27

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

— machineaddict
источник
10

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

— DraggonZ
источник
9

Создайте собственную загрузку Bootstrap для 5 колонок

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

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

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

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

— Павло
источник
7

С 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>
Развернуть фрагмент

— caub
источник
flexbox лучше, чем начальная загрузка, если он соответствует вашим потребностям.
— ml242
6

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

<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%;
}
— Studio4
источник
1
Фактическая ширина составляет 17,94872%, и она не отвечает, вам нужно будет установить новое поле для каждого столбца во всех запросах @media.
— Machineaddict
5 
<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%;
}
— Mafnah
источник
1
это должно быть .equal .span2 {ширина: 20%; }
— Studio4
... и это не работает. каждый столбец, кроме первого, имеет оставленное поле.
— Machineaddict
5

Создайте 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>
— agDev
источник
5

Bootstrap 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>
— daGUY
источник
4

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

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

— NIPSON
источник
3

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

— bradrice
источник
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 */
— витро
источник
3

По умолчанию 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>
— byteC0de
источник
3

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>
— Маниш Верма
источник
3

Макет из 5 колонок в стиле Twitter Bootstrap

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
— Санджиб Дебнатх
источник
3

Решение, которое не требует большого количества 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*/
  }
}
— nicolallias
источник
3

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

@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

— GiorgosK
источник
2

В начальной загрузке 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%;
}
— guaph
источник
2

Как вы можете добавить 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>
Развернуть фрагмент

— Робинд Кумар
источник
2

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

— Викас Бару
источник
2

Пять колонок явно не являются частью начальной загрузки.

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

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

— gonatee
источник
2

Я создал определения 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);
  }

}

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

— Nulen
источник
2

Кто-то использует 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";
— Vedmant
источник
1
спасибо, это было то, что я искал, я сделал 1-5ths 2-5ths и т. д. и даже 3-10ths и т. д. теперь, чтобы иметь большую гибкость, очень удобно
— morksinaanab
2

Для Bootstrap 4.4+

Используйте новые row-cols-nклассы.

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

Для версий 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%}}

— djibe
источник
1 

.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%;
  }
}
Развернуть фрагмент

— Aroos
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.