Bootstrap:网格无法在移动视图中工作

Question

以下是我使用bootstrap 3的网站的网格结构.它在桌面版本中看起来不错,但是当我调整窗口大小时,它不会进入移动/标签视图.这里有什么不对？在桌面上我希望它们占据行的1/6,而在移动设备上占1/3.

<div class="row" id="features">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
</div><!--row-->

Answer 1

请检查您的html head部分是否包含meta标签

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

你的目标是什么？

在您的代码中，您设计的结构与桌面结构相同。

将内部容器中的 div 类更改为如下所示：

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

类后的数字表示网格内的宽度。前缀col-lg，col-md，col-sm，col-xs表示不同的屏幕尺寸（台式机，平板电脑，手机），更可以在白手起家电网部分中找到的信息：http://getbootstrap.com/css/#grid