BootStrap 模板中的 **col-md-4** 类和 **col-xs-4** 类有什么区别？答案

【问题标题】：What is the difference between the **col-md-4** class and the **col-xs-4** class in BootStrap template?BootStrap 模板中的 **col-md-4** 类和 **col-xs-4** 类有什么区别？
【发布时间】：2015-10-20 14:53:43
【问题描述】：

我是 Twitter BootStrap 的新手，我有以下疑问。

我已经清楚 BootStrap 网格布局是如何工作的，所以如果我有这样的东西：

<div class="row">
    <div class="col-md-4">
    <div class="col-md-4">
    <div class="col-md-4">
</div>

简单来说就是我把一行分成了4维的3列（因为BootStrap的网格布局是基于12列的）

我的疑问与这些列的 md 定义有关。

我知道我也可以使用 <div class="col-xs-4"> 之类的东西

col-md-4 类和 col-xs-4 类有什么区别？

【问题讨论】：

这一切都在文档中进行了解释。它与它在不同尺寸的屏幕上的行为方式有关。
阅读getbootstrap.com/css/#grid-options
查看文档 > Grid Options
What is the difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3?的可能重复

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

基本上，

它将定义 xl（超大屏幕）和 md（中型屏幕）中的列的行为；

例如：当屏幕为 xl 时，列的比例为 12 是列的总和，如果屏幕变小，列将中断。但是，如果您使用 md 进行设置，您可以使屏幕更小，但在尺寸达到之前列不会中断：

xs（用于手机）
sm（用于平板电脑）
md（适用于台式机）
lg（适用于较大的桌面）

参考： https://getbootstrap.com/examples/grid/

【讨论】：