Вообще странно, что этот код отсутствует в фреймворке bootstrap из коробки. Приходится изощряться и добавлять этот функционал самому. Здесь впринцыпе нет ничего сложного просто добавьте нужный код в свою версию bootstrap, в отдельный файл css или в сам bootstrap.min.css и все должно заработать.
Добавление 5 колонок в bootstrap 4
Совсем недавно, в новом проекте встала задача добавить 5 колонок в бутстрапе. ОК Нет проблем подумал я, забыв, что работаю в относительно новом бутстрап 4. Недолго думая сделал все по старинке из третьего бутстрапа. Естественно чуда не случилось
Т.к мне жаль своего времени на написание и штурмовать новый фрейемворк я особо не хотел, поэтому я естественно полез в поиск с главным вопросом как все это сделать. К моему удивлению ничего для bootstrap 4 не было. Были какие-то странные инструкции, которые не решали проблему на всех устройствах (огромный экран, большой экран, средний экран, планшет, смартфон).
Просидев час в поиске было решено напрягать мозг и прописать стили самому. Ну и инструкцию для 5 колонок в bootstrap 4 лишней никому не будет. Проблема в том, что все построено на флексах, да это круто, никто не спорит, но когда ты уже на автомате пишешь код из прошлой версии, все становится сложнее.
Здесь активными классами являются .col-lg-5th, .col-md-5th, .col-sm-5th думаю вы итак знаете куда его вставить. Что бы изменить размер блока для смартфона, вставьте рядом с нашими классами, классы col. Для переключения размеров колонок с планшета на смартфон, в строке 99 уменьшите значение с 767px скажем до 720px, как сделал я в своём проекте @media only screen and (max-width: 720px). Имхо считаю, что переключение должно происходить позже. Собственно и всё.
.col-xs-5th,
.col-sm-5th,
.col-md-5th,
.col-lg-5th {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 20%;
float: left;
}
.col-5-th {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
@media (min-width: 768px) {
.col-sm-5th {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 992px) {
.col-md-5th {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 1200px) {
.col-lg-5th {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 992px) {
.col-md-5th {
width:33%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 33%;
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
.col-md-5th.col-sm-5th {
width: 20%;
float: left;
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 769px) {
.col-md-5th {
width:100%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-md-5th.col-sm-5th {
width:50%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
@media only screen and (max-width: 767px) {
.col-md-5th {
width:100%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-md-5th.col-sm-5th {
width:100%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
Добавление 5 колонок в bootstrap 3
Здесь все проще, инструкция впринцыпе таже, просто вставьте наш код в любой файл со стилями или в файл bootstrap.min.css Советую конечно слазить с bootstrap 3 и переходить на новый. Там конечно возможно стей больше, разработчики поработали на славу!
Мы используем наш класс .col-md-5th вставите в нужное место и всё будет работать.
.col-xs-5th,
.col-sm-5th,
.col-md-5th,
.col-lg-5th {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5th {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5th {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5th {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5th {
width: 20%;
float: left;
}
}
Кирилл
Спасибо за инструкцию весь инет облазил ничего нормального нет! Bootstrap 4 вещь довольно таки новая пора бы уже писать инструкции по работе и доработке. Для меня кстати тоже непонятно почему рзрабы не включили 5 столбец изначально в код. Видимо по причине нечетности, когда колонки адаптируются под смартфон или планшет, то получается одна колонка лишняя. Как вариант либо ее скрыть, либо делать уже 2 строчки по 5 колонок для достижения четного количества 10 и тогда на мобилах все будет нормально смотреться.
Сергей
Все получилось спасибо!
Федот-стрелец
Спасибо за инструкцию! все огонь! Bootstrap 4 вещь хорошая! учите не ленитесь! еще пригодится!
Просто Вася
Спасибо за инструкцию! Но как то странно что css код для бутстрапа 4 длиннее чем код бутстрап 3, ведь все идет к оптимизации и упрощении кода)) ну лан) работает и хорошо