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

Question

我们应该如何使用列类 (.col-xs-,.col-sm-,.col-md-,.col-lg-) ？

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

谢谢。

Answer 1

如果平板电脑是您的主要目标，请根据水平列数考虑您尝试实现的布局类型。

例如在平板电脑上你想要 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>

这也将在任何更宽/更大的设备（例如台式机、笔记本电脑）上显示为 3 列。因此，您只需为要支持的最小设备使用类。

在小于.col-sm-*平板电脑的设备上，此布局将垂直堆叠，并且所有列将更改为 100% 宽度。如果您想在智能手机上保持 3 列，您可以添加.col-xs-*该类..

<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>

看看这个不同的场景：http ://bootply.com/77634

Answer 2

不，您绝对不需要创建页面的不同版本。

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

如果您不想要引导程序提供的用于在所有断点上设置列的那种级别的粒度控制，为什么不从col-md-*列开始，看看它会给您带来什么，您可能会对此感到满意。如果您决定要针对不同的分辨率调整列，您绝对可以深入研究并应用这些额外的类。

Answer 3

转到此页面并尝试调整宽度。您会看到在不同的宽度下，列的排列方式不同。

您通常不会在不同类型 ( col-xs-*, col-sm-*, col-md-*,
col-lg-*) 之间进行选择。您通常会包括其中的一个或多个。

首先，您可以在col-md-*任何地方使用。如果稍后在使用具有较小屏幕的站点时，您发现某些内容没有按照您想要的方式布置，您可以添加更多类 ( col-xs-*, col-sm-*)。但是您不一定会删除col-md-*您已经选择的课程。