0

所以我对文档的理解是

xs = 像手机一样小

sm = iPad 和其他平板电脑

md = 小型笔记本电脑

lg = 大型笔记本电脑和大型台式机

<div class="col-xs-12 col-md-4 col-lg-3">
      <div class="thumbnail"></div>
      ......
</div>

我期望的是，在我的手机上，该项目将占据整个宽度，两侧都有“排水沟”。

在平板电脑（sm）上，我希望它选择之前的 xs 声明，因此它应该占用整个 12 列。因为我没有指定任何“sm”

在笔记本电脑（md）上，我期望三个项目。

在较大的（lg）屏幕上，我每行四个项目。

我用来测试响应能力的方法只是调整我的浏览器。当我缩小窗口时会发生什么，当我的项目最小（xs 和 sm）时，我的项目最终会变成每行一个项目，但它溢出我看不到整个项目。

我做错了什么，我误解了网格系统背后的理论吗？

4

1 回答 1

0

我认为有一个小错误。

对于 xs 和 sm 的全宽 ---->> col-xs-12 应该足够了

由于您希望 md 每行有 4 个项目，因此您应该编写 col-md-3 而不是 col-md-4 （数字 3 表示它在每行 12 列中占据了多少列。所以 col-md-3 占据 3 列--->> 12/3 =每行4个项目）

同样对于 lg----> col-lg-4 上的每行 3 个项目

我认为这应该在更大的屏幕上解决。

也很抱歉，我没有完全理解你所说的溢出。如果您可以向我展示您的代码或您要实现的内容的图片，我可以告诉我一些事情。

于 2017-05-30T16:59:27.287 回答