Question

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

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

感谢。

Answer 1

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

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

如果您不希望引导程序在所有断点中设置列的粒度控制级别，那么为什么不从col-md-*列开始，看看会给您带来什么，您可能会对此感到满意那。如果您决定要根据不同的分辨率调整列，您绝对可以深入了解并应用其他类。

Answer 2

转到this page并尝试调整宽度。你会看到在不同的宽度上，列的排列方式不同。

您通常不会在不同类型（col-xs-*，col-sm-*，col-md-*，col-lg-*）之间进行选择。您通常会包含其中一个或多个。

首先，您可以在任何地方使用col-md-*。如果稍后在使用屏幕较小的网站时，您会看到未按照您希望的方式布置的内容，则可以添加更多课程（col-xs-*，col-sm-*）。但是，您不一定会删除已经选择的col-md-*类。

Answer 3

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

例如，在平板电脑上，您需要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

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

3 个答案: