Как сделать колонки бутстрапа для мобильных устройств?

Question

По какой-то причине мои столбцы будут работать только в веб-браузере/планшетах.

Однако, когда я пытаюсь просмотреть свой сайт на своем Droid 4, изображения, которые я использовал, не отображаются в строке (разделены на столбцы). Что именно мне нужно сделать, чтобы эти столбцы работали?

CSS:

<link href="css/bootstrap.css" rel="stylesheet"> 

    <style type="text/css"> 


    @media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } } 
    </style> 

Изображения не в строке, если смотреть на мобильном устройстве:

<div class="row"> 
    <div class="col-lg-4"> 
     <img class="img-circle" src="img/SunnyD.jpg" alt="Generic placeholder image" width="50" height="50"> 

    </div> 
    <div class="col-lg-4"> 
     <img class="img-circle" src="img/lindt.jpg" alt="Generic placeholder image" width="50" height="50"> 

    </div> 
    <div class="col-lg-4"> 
     <img src="img/tmlogo.jpg" alt="Generic placeholder image" width="50" height="50"> 

    </div> 
    </div><!-- /.row --> 

, если смотреть на мобильный, я вижу новую строку для каждого изображения. Когда вы просматриваете в браузере, я вижу все изображения в одной строке (это то, что я хочу).

Answer 1

Вам нужно добавить к классу атрибуты значения

col-xs- - Дополнительные маленькие устройства Телефоны (< 768px)

col-sm- - Малые устройства таблетки (≥768px)

col-md- - Средние устройства Настольные компьютеры (≥992px)

Например,

.... 
<div class="col-lg-4 col-xs-1 col-sm-2 col-md-3"> 
.... 

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

Answer 2

Изменить .col-lg-4.col-xs-4.