twitter-bootstrap - 使用 Bootstrap 3 定位多个设备

Question

我正在开发针对手机、平板电脑和台式机的网站。假设我有一个 div 元素。处理这些设备的好方法是什么，我应该有 3 个不同版本的代码，还是我只需要像这样将所有类包含在一个 div 中:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">Content</div>

谢谢。

Answer 1

就像您的示例一样，使用 Bootstrap，您可以在单个 DIV 中使用多个 col-* 类。 较小的网格类也适用于较大的屏幕，除非专门为较大的屏幕覆盖。因此，您仅需要为您要支持的最小设备宽度 使用该类。小于 768 像素的宽度始终垂直堆叠(12 列)，除非您使用 xs 类

• xs - 小于 768 像素
• sm - 768 像素及以上
• md - 992 像素及以上
• lg - 1200 像素及以上

例子...

所有设备上 12 列宽:(你不需要 sm,md,lg 除非你想在每台设备上使用不同的宽度)

<div class="col-xs-12">Content</div>

在台式机 (lg)、笔记本电脑 (md)、平板电脑 (sm) 上 6 列宽，在手机上 (xs) 12 列:

<div class="col-sm-6">Content</div>

所有设备上的 6 列宽:

<div class="col-xs-6">Content</div>

lg 和 md 上有 4 列，sm 和 xs 上有 6 列:

<div class="col-md-4 col-xs-6">Content</div>

带有更多示例的演示: http://www.bootply.com/73778