5 столбцов одинаковой ширины в начальной загрузке (полная ширина контейнера)

Question

В соответствии с моим шаблоном PSD, у меня есть КОНТЕЙНЕР, который состоит из 5 столбцов равной ширины (344 пикселей). Я решил пойти с начальной загрузкой с точки зрения отзывчивости. Но теперь я разочарован этой задачей.

Есть ли способ реализовать это или мне нужно:

• Перестройте мой psd-шаблон, чтобы он соответствовал размеру сетки начальной загрузки и размерам
• Не использовать начальную загрузку и писать собственные адаптивные классы

Codepen: http://codepen.io/anon/pen/YZbBQG

<div class="cont">
        <div class="bicycles">
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
        </div>
    </div>

Answer 1

Я бы рекомендовал использовать автоматический макет col-lg столбцы для большей ширины, чтобы вы могли иметь 5 в поперечнике, а затем уменьшить до столбцов сетки стандартного размера на md, sm, так далее..

http://www.codeply.com/go/DVzExqdUZa

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 hidden-md-down">
               <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>

http://www.codeply.com/go/DVzExqdUZa

Answer 2

Это легко с помощью начальной загрузки 4. Вам просто нужен один flex линия на столбцах, чтобы определить пользовательскую ширину.

.row > .col {
  flex: 0 0 344px;
  background: #eee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>

Answer 3

Вы также можете использовать Flexbox. Я предлагаю вам использовать 1200px или меньше в качестве максимальной ширины контейнера.

<div class="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

.container{

    display: flex;
    width: 1720px;

}

Answer 4

Вы можете настроить свою версию начальной загрузки "правильным способом". Ссылка на эту страницу позволяет вам настроить МНОГО настроек, включая количество столбцов сетки.

http://getbootstrap.com/customize/