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主题部分是否包含了元标记

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

Answer 2

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

此外，如果您真的想要尝试使用移动设备/平板电脑视图，那么Google Chrome Inspector非常棒，而且只需调整窗口大小就更准确。

如果您希望它在任何设备上看起来相同，如果您希望它们占用更多空间，可以考虑使用此代码，请考虑从col-??-2更改为col-??-4，或将更少的空间更改为：{{ 1}}。

col-??-1

Answer 3

你的目标是什么？

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

将内部容器中的div类更改为：

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

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

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

3 个答案: