twitter bootstrap отзывчивая настройка div макет

Question

Я использую отзывчивую таблицу стилей Bootstrap, и у меня есть 4 квадрата в divs, охватывающих 12 столбцов, поэтому | 3 | 3 | 3 | 3 |

и когда я рассматриваю это в мобильном браузере, я вижу:
| 12 |
| 12 |
| 12 |
| 12 |

Но я хочу посмотреть:
| 6 | 6 |
| 6 | 6 |

Другими словами, я не хочу, чтобы элементы отображались один за другим, больше двух на одну строку и два на следующем.

Возможно ли это?

Answer 1

По медиа запрос по умолчанию Bootstrap в выполняет следующие действия:

@media (max-width: 767px) 
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { 
float: none; 
display: block; 
width: 100%; 
} 

Для достижения раскладку вам нужно, установить другой медиа-запрос что-то похожее на:

@media (max-width: 767px) 
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { 
float: left; 
width: 50%; 
} 

Tweek в CSS, как вы видите поместиться.

Answer 2

Если вы беспокоитесь только с .span3 DIVs медиа-запрос, как это будет работать ..

@media (min-width: 400px) and (max-width: 767px) { 
    .row-fluid .span3 { 
    width:44%; 
    float:left; 
    } 
    .row-fluid .span3:nth-child(3) { 
    margin-left:0; 
    } 
} 

Это будет по-прежнему позволяют смещ_по_столбцам переключиться на ширину 100% (уложены) на менее 400 пикселей для крошечные экраны. Демонстрация: http://bootply.com/69753

Другой вариант - использовать чувствительные классы утилиты, как показано в этой демонстрации: http://bootply.com/64868, но для этого требуется отдельная разметка для каждого отзывчивого «представления».