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

Question

我在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 类之间有什么区别？

Answer 1

基本上，

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

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

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

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