3 столбца 2 строки реагируют на 2 столбца 3 ряда

Question

Я использую компоновку сетки Bootstrap css, она отлично работает.

Я не нашел пример, где он может реагировать и преобразовывать 3 столбца и 2 строки в 2 столбца и 3 строки.

Что он делает, это создать отдельный столбец из 6 строк. Я могу преобразовать четные столбцы с 4 в 2, но как сделать 3, поскольку они находятся в 2 разных строках?

Я думал, что если есть решение для четного числа столбцов, то это можно сделать для нечетного.

Answer 1

Попробуйте использовать

<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 
<div class="col-xs-6 col-sm-6 col-md-4" ></div> 

Answer 2

Примите во внимание, что вы, возможно, придется думать за пределами коробки (punny я знаю) на этом. Это может помочь визуализировать это лучше, если сначала вывести разные этапы.

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

http://getbootstrap.com/css/#grid-example-mixed

У вас есть всего 6 дивы. Затем просто отрегулируйте номера ширины столбца.

Теперь вы не сказали, хотите ли вы использовать три столбца на экране рабочего стола или на мобильном телефоне. Я собираюсь предположить здесь, для простоты, что расположение двух столбцов - это макет.

<div class="row"> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div> 
</div> 

Вы можете переключить его, но почему положить, что много столбцов в такое маленькое пространство ... там могут быть причины, чтобы сделать это таким образом, но это не часто из-за проблемами пальца шириной. Однако Bootstrap - это уровень гибкости.

<div class="row"> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div> 
</div> 

Edit Существуют также способы, чтобы держать его в центре с помощью зачетов, если у вас есть сказать компоновку 7 столбцов. Он просто требует регулировки ширины столбцов, а затем добавления смещений, чтобы поддерживать его в центре.

http://getbootstrap.com/css/#grid-offsetting

Важная вещь, чтобы помнить при добавлении смещения, является то, что ширина цв плюс смещение не может равняться 12 или будет выталкиваться весь путь направо. Он также лучше всего работает, когда ширина столбца является четным числом (2, 4, 6, 8 или 10).

Вы можете попрактиковаться в JSfiddle или CodePen (трансляция живых обновлений в WYSIWYG-просмотрщике).