5 колонок в Bootstrap 4
Инструкции Комментариев: 3

Делаем 5 адаптивных колонок для bootstrap 3 и bootstrap 4

Вообще странно, что этот код отсутствует в фреймворке 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;
  }
}

            


Комментарии (3)

Поделиться:


  1. Кирилл 28 ноября 2017, 13:16(Комментарий был изменён)
    Спасибо за инструкцию весь инет облазил ничего нормального нет! Bootstrap 4 вещь довольно таки новая пора бы уже писать инструкции по работе и доработке. Для меня кстати тоже непонятно почему рзрабы не включили 5 столбец изначально в код. Видимо по причине нечетности, когда колонки адаптируются под смартфон или планшет, то получается одна колонка лишняя. Как вариант либо ее скрыть, либо делать уже 2 строчки по 5 колонок для достижения четного количества 10 и тогда на мобилах все будет нормально смотреться.
    1. Сергей 08 декабря 2017, 13:18
      Все получилось спасибо!
      1. Федот-стрелец 18 декабря 2017, 23:38
        Спасибо за инструкцию! все огонь! Bootstrap 4 вещь хорошая! учите не ленитесь! еще пригодится!

        Добавить комментарий

        Selection Studio

        Поделитесь страницей в соц. сетях