我正在开发针对手机，平板电脑和台式机的网站。让我们说我有一个div元素。处理这些设备的好方法是什么，如果我有3个不同版本的代码，或者我只需要在一个div中包含所有类，如下所示：
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">Content</div>
谢谢。
答案 0 :(得分：6)
就像您的示例一样，使用Bootstrap，您可以在单个DIV中使用多个col-*类。 较小的网格类 也适用于较大的屏幕，除非专门针对较大的屏幕进行覆盖。因此，仅需要将该类用于您要支持的最小设备宽度。除非使用xs类
...实例
在所有设备上 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
答案 1 :(得分：0)
为桌面准备您的网站并使用此元标记。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1.0">
col-xs-12是让内容适合一行。当您在ur项目中包含bootstrap.css时，Bootstrap会自动将您的内容放入不同的设备中。