Как поместить в сетку bootstrap 12 колонок 5 блоков?

Question

[freeman0204]

prntscr.com/ggx1wy 12/5=2.4. col-md-2.4 так нельзя писать?

Comments

[Максим]

не парюсь я бутстрапами всякими - если надо то пишу своё : https://codepen.io/simkaUser/pen/ZJPmrr?editors=1100 и могу любое кол-во придумать

Answer 1

[Андрей Кварцов]

Можно сделать например:

<div class="row">
 <div class="col-xs-2 col-xs-offset-1"></div>
 <div class="col-xs-2"></div>
 <div class="col-xs-2"></div>
 <div class="col-xs-2"></div>
 <div class="col-xs-2"></div>
</div>

Будет и по середине и 5 блоков, но слева и справа будет отступ равный ширине col-xs-1

Comments

[freeman0204]

Я так и сделал)

Answer 2

[Павел]

Можно, но стили для такого class Вам придется написать самому под все устройства

Answer 3

[Localhost]

я бы сделал через <li> и задал был несколько @media

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

Answer 4

[Дмитрий Дарт]

Сходите на bootstrap customize сгенерируйте себе сетку на 5 колонок, скачайте её, переименуйте у неё стили, например col-md на col-md5 что бы не сливались с дефолтными и всё, пишете потом просто col-md5-1 или col-md5-5

Answer 5

[Кирюшка Цисарь]

не помещайте тогда, в чём проблема? свою сеточку быстренько

готовое решение для sass как пример:
@include grid-univers(ls, 5);

@mixin grid-univers($name, $count, $i: 1){
@while $i <= $count {
.#{$name}#{$i}{
width: $i * (100% / $count);
}
$i: $i+1;
}
}

Answer 6

[Сергей delphinpro]

Сначала дописываем недостающие колонки для сетки

.col-xs-1of5, .col-sm-1of5, .col-md-1of5, .col-lg-1of5, .col-xl-1of5 {
  @include make-col-ready();
  width: 100%;
}

.col-xs-1of5 { @include make-col(1, 5); }
@include media-breakpoint-up(sm) { .col-sm-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(md) { .col-md-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(lg) { .col-lg-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(xl) { .col-xl-1of5 { @include make-col(1, 5); } }

Потом просто используем

<div class="col-sm-1of5">1</div>
<div class="col-sm-1of5">2</div>
<div class="col-sm-1of5">3</div>
<div class="col-sm-1of5">4</div>
<div class="col-sm-1of5">5</div>

Disclaimer:
Если не дружите с препроцессорами, то это уже ваша проблема =))

Answer 7

[Максим Тимофеев]

сделайте offset по одной колонке слева и справа, останется 10/2 = 5

Answer 8

[Александр Серый]

scss в помощь

/* =======================================================
                Responsive 5 Columns Grid
======================================================= */
.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)
}