Question

我对bootstrap中的列感到很困惑。我研究bootstrap，但我无法识别列类型之间的差异。

 .col-md-4
 .col-xs-4
 .col-sm-4
 .col-lg-4
 .col-sm-offset-2

我明白这些数字是什么意思。我理解12列但是md，xs ....之间有什么不同？

我检查了多个网站，但无法理解。如果你能给我详细介绍，我很高兴。

Answer 1

这些不同的列类型用于使网站响应。所有响应屏幕尺寸大于 1200px 的CSS都有前缀 lg （大），屏幕尺寸范围从 992px到1199px 前缀 md （中），类似sm（小）用于屏幕尺寸 768px至991px 。小于 768px 的任何内容都属于 xs （超小）类别。现在，如果你有这样的代码：

<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>

在这种情况下，您将在大屏幕上看到3个div，在中等屏幕上看到2个div，在较小的屏幕上看到2个div，在超小屏幕上看到1个div。每个列类型都已在单独的媒体查询中定义。因此，只有一种列类型会影响div的宽度。

Answer 2

看看这些。这些媒体查询用于根据分辨率为不同设备设置CSS。

 /* Large desktops and laptops */
    @media (min-width: 1200px) {

    }

    /* Landscape tablets and medium desktops */
    @media (min-width: 992px) and (max-width: 1199px) {

    }

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {

    }

    /* Landscape phones and portrait tablets */
    @media (max-width: 767px) {

    }

    /* Portrait phones and smaller */
    @media (max-width: 480px) {

    }

Answer 3

xs类定位移动设备，sm定位平板电脑，md定位笔记本电脑和小型桌面屏幕，lg定位大型桌面屏幕。

考虑新网格类的最佳方式是，它们可以从移动设备上升，而不是从桌面设备上下来。这意味着默认情况下，您的网格将从移动设备堆叠到您已使用的网格类断点。

例如，使用.col-lg-4意味着您的网格将保持堆叠在移动设备，平板电脑和小型桌面屏幕上。只有达到大型桌面断点才会使网格水平。

引导程序中列类型之间的差异

3 个答案: