Twitter bootstrap 我应该使用哪些Bootstrap3新列类？

我们应该如何使用列类（.col xs-，.col sm-，.col md-，.col lg-

我的意思是，我正在开发一个主要针对平板电脑的web应用程序，但它也必须在智能手机和台式机上运行良好。从bootstrap文档中，我看到这些类中的每一个都针对一种设备类型/大小。所以我该选哪一个？我不认为我应该为每个设备创建不同版本的页面，是吗

---

谢谢。

不，您完全不需要创建不同版本的页面

所有这些不同的类都允许您跨不同的分辨率定义列

如果您不想要引导程序为设置所有断点的列提供的粒度控制级别，那么为什么不从

col md-*

列开始，看看这会给您带来什么，您可能会对此感到满意。如果您决定要根据不同的分辨率调整列，则完全可以深入并应用这些附加类。

转到并尝试调整宽度。您将看到，在不同的宽度下，柱的排列方式不同

您通常不会在不同类型之间进行选择（

col xs-*

，

col sm-*

，

col md-*

，

col lg-*

）。您通常会包括其中一个或多个

---

首先，您可以在任何地方使用

colmd-*

。如果以后在使用较小屏幕的站点时，您看到某些内容没有按照您想要的方式布置，您可以添加更多类（

col xs-*

，

col sm-*

）。但是，你不必删除你已经选择的 CalMD–*/Cube类。

< P>如果平板电脑是你的首要目标，考虑你在水平列的数量上要达到的布局类型。

例如，在平板电脑上，您需要3列，因此您可以使用

.col sm-*

<div class="row">
      <div class="col-sm-4">..</div>
      <div class="col-sm-4">..</div>
      <div class="col-sm-4">..</div>
</div>

---

针对不同的场景查看此内容：

尝试调整浏览器的大小，以查看示例中的列如何自动响应屏幕大小，从而更好地了解其工作原理。记住，你可以对同一个div使用多个列类。我这样做了，但我承认我没有想到使用几个类..嗯。谢谢

<div class="row">
     <div class="col-sm-4 col-xs-4">..</div>
     <div class="col-sm-4 col-xs-4">..</div>
     <div class="col-sm-4 col-xs-4">..</div>
</div>