Вообще странно, что этот код отсутствует в фреймворке 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, ведь все идет к оптимизации и упрощении кода)) ну лан) работает и хорошо