html - 如何为移动设备制作 Bootstrap 列？

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