我应该使用哪个Bootstrap3新的列类？

Question

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

我的意思是，我正在研究一个主要针对平板电脑的Web应用程序，但它也必须在智能手机和台式机上运行良好。从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