30
Ноя
2016

Сетка с 5 колонок в Twitter Bootstrap

Каждый верстальщик, который использует Twitter Bootstrap для адаптивной верстки, сталкивается с вопросом — как же сделать сетку с 5 колонок.  Мы знаем что Bootstrap использует 12-ти колоночную сетку. Она делится на 2,3,4 блока в одной строчке. Но как быть если нам нужно 5 блоков? Вот пример с верстки когда у меня возник такой вопрос. Смотрите скрин, нужно было разместить 5 блоков в одном ряду.

Сетка с 5 колонок в Twitter Bootstrap (Как сделать? Есть ответ)

 

И на это есть ответ, нужно сделать всего два действия.

1. Добавляем стили

.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
 
.col-xs-1-5 {
  width: 20%;
  float: left;
}
 
@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 20%;
    float: left;
  }
}
 
@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;
    float: left;
  }
}
 
@media (min-width: 1200px) {
  .col-lg-1-5 {
    width: 20%;
    float: left;
  }
}

2. Структуру 5 колоночной сетки Bootstrap делаем в таком виде:

<div class="row">
    <div class="col-xs-6 col-sm-1-5  col-md-1-5  col-lg-1-5"><img src="путь_к_картинке" alt="1" /></div>
    <div class="col-xs-6 col-sm-1-5  col-md-1-5  col-lg-1-5"><img src="путь_к_картинке" alt="2" /></div>
    <div class="col-xs-6 col-sm-1-5  col-md-1-5  col-lg-1-5"><img src="путь_к_картинке" alt="3" /></div>
    <div class="col-xs-6 col-sm-1-5  col-md-1-5  col-lg-1-5"><img src="путь_к_картинке" alt="4" /></div>
    <div class="col-xs-6 col-sm-1-5  col-md-1-5  col-lg-1-5"><img src="путь_к_картинке" alt="5" /></div>
</div>

 

Сетка с 5 колонок в Twitter Bootstrap готова. Теперь вы можете делать 5 колонок в любом месте на сайте. Наслаждайтесь результатом. Если у вас есть вопросы, задавайте их в комментариях.

Запись Сетка с 5 колонок в Twitter Bootstrap впервые появилась Di-Grand блог о создании сайтов.

Источник: https://di-grand.com/blog/css/3401-setka-s-5-kolonok-v-twitter-bootstrap-kak-sdelat-est-otvet.html

Share

Тебе может это понравится...