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

【问题标题】：Bootstrap :Grid not working in mobile viewBootstrap：网格在移动视图中不起作用
【发布时间】：2015-01-26 15:51:08
【问题描述】：

以下是我使用 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-->

【问题讨论】：

标签： javascript html css twitter-bootstrap responsive-design

【解决方案1】：

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

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

【讨论】：

不知道为什么你被否决了。这就是给很多人带来问题的原因。
我已经投了赞成票。你的答案是-1。我确实看到您的代码块格式不正确，这可能是您被否决的部分原因。我已经提交了一个正在等待批准的修改。
非常感谢，伙计，在 bootstrap 中花了一整天时间对所有类和大小进行各种排列和组合之后，这就是最终奏效的解决方案。这应该是公认的答案。

【解决方案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

【讨论】：

为我成功了。感谢你。但是，如果我们不需要使用 col-lg-2，请注意一点，那么这个类的目的是什么？我的意思是如果 md 类工作相同，那么为什么需要 lg 类？
lg 和 md 不一样。 lg 用于大型设备桌面（≥1200px），md 用于中型设备桌面（≥992px）。见这里：getbootstrap.com/css/#grid-options
另外，明智的做法是，如果 md-2，则不需要 lg-2，因为它的中等“及以上”，您可以在此示例中消除它。

【解决方案3】：

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

此外，如果您真的想尝试移动/平板电脑视图，Google Chrome Inspector 非常棒，而且比仅调整窗口大小更准确。

如果您希望它在任何设备上看起来都一样，则此代码有效，如果您希望它们占用更多空间，请考虑将 col-??-2 更改为 col-??-4，或将更少空间更改为：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>

【讨论】：