bootstrap3中的col-lg和col-md有什么区别

Question

bootstrap 3中col-lg、col-md、col-xs和col-sm网格系统有什么区别。

在引导模板中，他们仅将<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div> 用于一个柱状网格。我是 Bootstrap 的初学者。

Answer 1

当使用 Bootstrap 时，这些是为一个柱状网格添加的类，对应于超小型、小型、中型和大型设备。

.col-xs = *超小型设备（即电话）（

.col-sm = 小型设备（即平板电脑）（≥768px）

.col-md = 中型设备（即笔记本电脑或小型台式机）（≥992px）

.col-lg = 大型设备（即台式机）（≥1200px）*

通过媒体查询，您可以只允许浏览器解释正确的类。例如，如果您从平板电脑浏览该网站，您会看到实际应用在浏览器中的 css 属性只是 .col-sm 类的属性。

更新

另外值得一提的是，这些类在总共 12 列的网格上使用，这是 Bootstrap 使用的网格系统设置。

因此，当您在一个元素上使用.col-sm-4 时，这意味着该元素将占据总宽度的 12 列中的 4 列。 这在逻辑上意味着如果使用.col-sm-4，那么平板电脑上的页面中每行只有 3 个元素。

例如，假设我们要为一个作品集展示一些项目卡片：

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
    <div class="card-wrapper">  
        <img src="img.jpg">
        <div class="overlay-text">
            <h5>Project 1</h5>
            <div class="labels">
                <label>Tech Stack</label>
                <h6>HTML5, CSS, JS</h6>
            </div>       
        </div>          
    </div> 
</div> 

同时使用class="col-xs-12 col-sm-6 col-md-4 col-lg-3" 用于在特定设备上查看页面时激活元素上的不同CSS 属性。

换句话说，如果用户在桌面上打开网站，col-lg-3表示一共会显示4张卡片，当col-md-4 means一共显示3张卡片，col-sm-6一共显示2张卡片和那么col-xs-12 意味着在移动设备上只有一张卡片会具有 100% 的页面宽度。

Answer 2

他们为该模板中的一个列网格添加了所有这些类，因为这些类对应于列超小型、小型、中型和大型设备。

.col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*

Answer 3

所有这些标签，xs、sm、md 和 lg 都是 引导网格系统的一部分。 Bootstrap 的网格系统允许在页面上最多显示 12 列。 Bootstrap 的网格系统是响应式的，列会根据屏幕大小重新排列：在大屏幕上，将内容组织成三列可能看起来更好，但在小屏幕上，如果内容项堆叠起来会更好相互叠加。

提示：请记住，网格列的行数最多应为 12 个。不仅如此，无论视口如何，列都会堆叠。

网格系统规则

一些 Bootstrap 网格系统规则：

• 行必须放在.container（固定宽度）或.container-fluid（全宽度）内，以便正确对齐和填充
• 使用行创建水平列组
• 内容应该放在列中，并且只有列可以是行的直接子级
• .row 和 .col-sm-4 等预定义类可用于快速制作网格布局
• 列通过填充创建装订线（列内容之间的间隙）。该填充通过.rows 上的负边距在第一列和最后一列的行中偏移
• 通过指定您希望跨越的 12 个可用列的数量来创建网格列。例如，三个相等的列将使用三个 .col-sm-4

我建议您浏览this link 和更多链接页面以便更好地理解。