使用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可以col-*在单个DIV中使用多个类.在较小的网格类也适用于更大的屏幕除非是专门为大屏幕覆盖.因此,您只需将该类用于您要支持的最小设备宽度.除非您使用xs类,否则小于768像素的较小宽度始终垂直堆叠(12列)

• xs - 小于768像素
• sm - 为768像素甚至更高
• md - 992像素及更高
• lg - 1200 px及更高

例子...

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

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

桌面(lg),笔记本电脑(md),平板电脑(sm)上的6列宽,手机上的12列(xs):

<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