如何为移动设备制作引导列？

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。