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

Question

有什么区别col-lg,col-md,col-xs并col-sm在网格系统自举3.

在引导程序模板中,它们<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类的属性.

UPDATE

另外值得一提的是,这些类总共使用了12列的网格,这是Bootstrap使用的网格系统设置.

因此,当您.col-sm-4在元素上使用时,这意味着该元素将占总宽度的12个中的4列.从逻辑上讲,如果.col-sm-4使用if,则每行只有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意味着总共将显示4张卡,当col-md-4 means共有3张卡,col-sm-6总共2张卡,然后col-xs-12在手机上只有1张卡将具有100%宽度的页面.