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

Question

col-lg 之间有什么区别？ , col-md , col-xs和 col-sm bootstrap 3 中的网格系统。

在 Bootstrap 模板中，他们使用了 <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div>仅适用于一列网格。我是 Bootstrap 的初学者。

Answer 1

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

.col-xs = *超小型设备(即手机)(<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" 用于激活元素上的不同 CSS 属性在特定设备上查看页面时。

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