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

Собственно вопрос, колонок-то 12 а мне бы 5 выровненных по центру одинаковой ширины. Как поступить в этом случае если у меня bootstrap?
  • Вопрос задан
  • 16222 просмотра
Решения вопроса 3
@sergeystepanov1988
Добавить дополнительные классы в начало своего 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
Ответ написан
Tantacula
@Tantacula
Ларавельщик, витающий в небесах.
Зайти на сайт бутстрапа и собрать кастомный вариант. Либо скомпилировать его из сиходников на своей машине, если с sass / less дружите
Ответ написан
Пригласить эксперта
Ответы на вопрос 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...
Ответ написан
@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 колонок без проблем.
Ответ написан
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Есть один вариант. Самый крутой.
НЕ ИСПОЛЬЗОВАТЬ БУТСТРАП :)
Ответ написан
Ваш ответ на вопрос

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

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