Twitter Bootstrap 3 - 3 даже столбцы на 765

Question

Использование Twitter BS3 в первый раз, и я пытаюсь достичь 3 равных столбцов во всех видовых экранах размером более 320 пикселей (iPhone, скажем). В окне просмотра 320 и меньше я хочу, чтобы мои столбцы располагались вертикально.

Глядя на систему сетки в документации, можно видеть, что я могу установить поток системы сетки, используя следующие классы

Максимальная ширина контейнера Отсутствует (авто) 728px 940px 1170px Класс Префикс .col - .col-sm- .col-lg-

Проблема с вышеизложенным заключается в том, что вы можете управлять расположением столбцов всего на 728 пикселей. Но что, если я хочу 3 равных столбца бок о бок на чем-нибудь выше 320, а не их предопределенных 728 пикселей?

Хороший пример того, что я ищу, можно найти на домашней странице Jetstrap. Три синих круга сохраняют бок о бок, пока вы не окажетесь на широкоэкранном расстоянии 320 пикселей. Моя версия начинается с вертикальной установки около 728 пикселей.

Answer 1

Вы можете использовать запрос @media переопределить как Bootstrap обычно обрабатывает "крошечный" сетку .col-4 ..

3 колонки HTML ..

<div class="row"> 
    <div class="col-sm-4 col-4"></div> 
    <div class="col-sm-4 col-4"></div> 
    <div class="col-sm-4 col-4"></div> 
</div> 

CSS медиа запросов меньше, чем 320px к изменению .col-4 шириной до 100% ..

@media (max-width: 320px) { 
    .col-4 { 
    width:100%; 
    } 
} 

Демонстрация: http://bootply.com/73952