使用 Bootstrap 3 定位多个设备 [英] Targeting Multiple Devices using Bootstrap 3

问题描述

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

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

谢谢.

解决方案

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

• xs - 小于 768 像素
• sm - 768 像素及以上
• md - 适用于 992 像素及更大的像素
• lg - 1200 像素及以上

示例...

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

Content

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

Content

6 列宽在所有设备上:

Content

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

Content

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

i am developing website that targeting on phones, tablets and desktops. Let's say i have a div element. What is the good way to handle these devices, should i have 3 different version of codes or maybe i just have to include all the class in one div like this :

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

Thank you.

解决方案

Just like your example, with Bootstrap you can use the multiple col-* classes in a single DIV. The smaller grid classes also apply to larger screens unless overriden specifically for larger screens. Therefore, you only need to use the class for the smallest device width you want to support. Smaller widths than 768 pixels always stack vertically (12 columns) unless you use the xs classes

• xs - for less that 768 px
• sm - for 768 px and greater
• md - for 992 px and greater
• lg - for 1200 px and greater

Examples...

12 columns wide on all devices: (you don't need sm,md,lg unless you want different widths on each device)

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

6 columns wide on desktop(lg), laptop(md), tablet(sm), 12 columns on phone(xs):

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

6 columns wide on on all devices:

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

4 columns on lg and md, 6 cols on sm and xs:

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

Demo with more examples: http://www.bootply.com/73778

这篇关于使用 Bootstrap 3 定位多个设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！