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 = *超小型设备（即电话）（＆lt; 768px）

.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" all同时激活元素上的不同CSS属性。

换句话说，如果用户在桌面上打开网站，则col-lg-3表示当col-md-4 means共有3张卡col-sm-6时，总共会显示4张卡片共有2张卡，然后col-xs-12表示在手机上只有1张卡，页面宽度为100％。

Answer 2

所有这些代码xs，sm，md和lg都是 Bootstrap网格系统的一部分。 Bootstrap的网格系统允许整个页面最多12列。 Bootstrap的网格系统是响应式的，列将根据屏幕大小重新排列：在大屏幕上，内容可能看起来更好，内容分为三列，但在小屏幕上，如果是内容项目叠加在一起。

提示：请记住，网格列最多可以添加12行。更重要的是，无论视口是什么，列都会堆叠。

网格系统规则

一些Bootstrap网格系统规则：

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

我建议您浏览this link以及进一步链接的网页，以便更好地理解。

Answer 3

他们为该模板中的一个列网格添加了所有这些类，因为这些类对应于列超小型，小型，中型和大型设备。 .col-xs = *超小型设备（即电话）（＆lt; 768px） .col-sm =小型设备（即平板电脑）（≥768px） .col-md =中型设备（即笔记本电脑或小型台式机）（≥992px） .col-lg =大型设备（即台式机）（≥1200px）*

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

3 个答案: