Bootstrap сетка реально ли 5 колонок?

Question

[ТёмнаяМатерия]

Собственно вопрос, колонок-то 12 а мне бы 5 выровненных по центру одинаковой ширины. Как поступить в этом случае если у меня bootstrap?

Answer 1

[Super User]

Добавить дополнительные классы в начало своего css или в конец bootstrap.css:

.col-xs-five,
.col-sm-five,
.col-md-five,
.col-lg-five {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-five {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-five {
        width: 20%;
        float: left;
    }
}

Паддинг выставить по своему усмотрению. Точнее не трогать, если не меняли дефолтный бутстраповский.

Нашел еще один вариант с использованием встроенных классов:

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

Если надо на каком-то разрешении выстроить их по вертикали, нужно просто сделать display: block классу .btn-group

Answer 2

[Дмитрий Евграфович]

Зайти на сайт бутстрапа и собрать кастомный вариант. Либо скомпилировать его из сиходников на своей машине, если с sass / less дружите

Comments

[ТёмнаяМатерия]

Не дружу, у меня шаблон уже, свой не могу собрать

[Котик Антон]

ТёмнаяМатерия: Значит на сайте бутстрапа собирайте нужное число колонок, в вашем случае кратное 5 getbootstrap.com/customize/#grid-system или пишите костыли.

Не понятно зачем вообще было брать 12 колоночную сборку бутстрапа, если у вас число колонок 5 в макете.

[ТёмнаяМатерия]

27cm: тут всё сложно, когда я выбирал шаблон я ещё не знал что будет 5 колонок ))

Answer 3

[Fahrenhe17]

Вот тут.

Answer 4

[romankononovich]

В 4 бутстрапе всё проще)
Создание в ряду 5 адаптивных блоков с одинаковой шириной.

<div class="row">
    <div class="col"> 1/5 </div>
    <div class="col"> 2/5 </div>
    <div class="col"> 3/5 </div>
    <div class="col"> 4/5 </div>
    <div class="col"> 5/5 </div>
</div>

https://itchief.ru/lessons/bootstrap-3/bootstrap-4...

Comments

[STIMUSHKA]

Лучший

Answer 5

[Сергей Горячев]

Есть один вариант. Самый крутой.
НЕ ИСПОЛЬЗОВАТЬ БУТСТРАП :)

Answer 6

[Il9mim]

Я делал так (из всех блоков только два имели 5 колонок, остальные - стандартные 2-3):

html:
<div class="row column-5">
    <div class="col-md-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 class="col-md-2"></div>
    <div class="col-md-1"></div>
</div>

css:
.column-5 .col-md-1  {
	width: 0%;
}
.column-5 .col-md-2 {
width: 20%;
}

А лучше для сетки использовать UIkit , там можно сделать от 1 до 10 колонок без проблем.

Comments

[OlgaMalceva]

Всё гениальное-просто!Спасибо Вам!

Answer 7

[Alex]

12 = 1-offset+2 + 2 + 2 + 2 + 2 + 1-offset