Bootstrap：网格在移动视图中不起作用

Question

以下是我使用 bootstrap 3 的站点的网格结构。它在桌面版本中看起来不错，但是当我调整 window 大小时，它不会转到 mobile/tab 视图.这里有什么问题吗？在桌面上，我希望他们占据行的 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

你的目标是什么？

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

将内部容器中的 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

Answer 2

请检查您的 html 标题部分是否包含元标记

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

Answer 3

我没有看到任何容器，所以我猜你有 none。如果不遵守此层次结构，网格可能会出现故障：container => row => col-??-## => 内容。此外，如果面板奇数 class 用于 CSS，你为什么不尝试伪 classes 并使其更紧凑，LESS col定义。

此外，如果您真的想尝试 mobile/tablet 视图，Google Chrome 检查器非常棒，而且比调整 window 更准确。

如果您希望此代码在任何设备上看起来都一样，如果您希望它们占用更多 space，请考虑从 col-??-2 更改为 col-??-4，或者减少 space 到：col-??-1.

<div class="container"> <!-- Or container-fluid, depending on your needs -->   
    <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-->
</div>

Bootstrap：网格在移动视图中不起作用

Bootstrap :Grid not working in mobile view

html

javascript

css

responsive-design

twitter-bootstrap