bootstrap3中col-lg和col-md有什么区别 [英] What are the difference between col-lg and col-md in bootstrap3

问题描述

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

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

解决方案

当使用 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="card-wrapper"><img src="img.jpg"><div class="overlay-text"><h5>项目1</h5><div class="标签"><label>Tech Stack</label><h6>HTML5、CSS、JS</h6>

同时使用 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% 页面宽度.

What are the difference between col-lg, col-md ,col-xs and col-sm grid system in in bootstrap 3.

In a bootstrap template they used <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div> only for one column grid. I am a beginner in Bootstrap.

解决方案

When using Bootstrap those are the classes which are added for one column grid and correspond to extra small, small, medium and large devices.

.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)*

This way through media queries you can allow to have only the right classes interpreted by the browser. If you surf that website from a tablet for example, you will see that the css properties which are actually applied in the browser are only the ones for the .col-sm class.

UPDATE

Also it's important to mention that those classes are used on a grid of 12 columns in total which is the grid system setup used by Bootstrap.

Therefore when you are using .col-sm-4 on an element it means that the element will take 4 columns out of 12 of the total width. Which logically means that if .col-sm-4 is used then only 3 elements per row can fit into the page on tablet.

For example, let's say we want to show some project cards for a portfolio:

<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> 

Using class="col-xs-12 col-sm-6 col-md-4 col-lg-3" all at the same time is used to activate different CSS properties on an element when viewing the page on a particular device.

In other terms, if the user opens the site on a desktop, col-lg-3 means that a total of 4 cards will be displayed, when col-md-4 means a total of 3 cards, col-sm-6 a total of 2 cards and then col-xs-12 means on mobile only 1 card will with 100% width of the page.

这篇关于bootstrap3中col-lg和col-md有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！