@freeman0204

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

prntscr.com/ggx1wy 12/5=2.4. col-md-2.4 так нельзя писать?
  • Вопрос задан
  • 906 просмотров
Решения вопроса 7
Можно сделать например:
<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
Ответ написан
PavelMonro
@PavelMonro
Можно, но стили для такого class Вам придется написать самому под все устройства
Ответ написан
Комментировать
@selo
я бы сделал через <li> и задал был несколько @media

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Ответ написан
Комментировать
gobananas
@gobananas
finishhim.ru
Сходите на bootstrap customize сгенерируйте себе сетку на 5 колонок, скачайте её, переименуйте у неё стили, например col-md на col-md5 что бы не сливались с дефолтными и всё, пишете потом просто col-md5-1 или col-md5-5
Ответ написан
Комментировать
carlcox
@carlcox
Fullstack developer
не помещайте тогда, в чём проблема? свою сеточку быстренько

готовое решение для 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;
}
}
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега Вёрстка
frontend developer
Сначала дописываем недостающие колонки для сетки
.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:
Если не дружите с препроцессорами, то это уже ваша проблема =))
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
сделайте offset по одной колонке слева и справа, останется 10/2 = 5
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
theobroma
@theobroma
javascript developer (ReactJS)
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)
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы