引导3中的col-lg，col-md，col-xs和col-sm grid系统有什么区别？
在引导模板中，他们使用< div class =“col-lg-6 col-md-6 col-xs-12 col-sm-6”>< / div>仅用于一列列网格。我是Bootstrap的初学者。
解决方法
当使用Bootstrap时，它们是为一个列网格添加的类，并且对应于超小型，小型，中型和大型设备。
.col-xs = *超小型设备(即手机)(< 768px) .col-sm =小型设备(即平板电脑)(≥768像素) .col-md =中型设备(即笔记本电脑或小型桌面)(≥992px) .col-lg =大型设备(即台式机)(≥1200像素)* 这样通过媒体查询，您可以允许只有浏览器解释正确的类。例如，如果您从平板电脑上浏览该网站，您将看到在浏览器中实际应用的CSS属性只是.col-sm类的CSS属性。 UPDATE 同样重要的是要提到这些类总共使用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属性。
换句话说，如果用户在桌面上打开站点，则collg-3表示将显示总共4张卡，当col-md-4表示总共3张卡时，共计6张的2张卡，然后col-xs-12表示在手机上只有1张卡将具有100％的页面宽度。
