bootstrap3中col-lg和col-md之间的区别是什么

问题描述

col-lg ， col-md ， xs 和 col-sm 网格系统in bootstrap 3 。

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

解决方案

当使用Bootstrap时，这些是为一列网格添加的类，

.col-xs = *超小设备（即手机）（

.col-sm =小设备（即平板电脑）（≥768像素）

.col-md =中型设备（即笔记本电脑或小型桌面）（≥992像素）

.col-lg =大型设备（即桌面）（≥1200像素）*

通过媒体查询，您可以允许只有浏览器解释的正确类。例如，如果您通过平板电脑浏览该网站，您会看到浏览器中实际应用的css属性只是 .col-sm 类的属性。

UPDATE

同样重要的是，这些类在总共12列的网格中使用这是Bootstrap使用的网格系统设置。

因此，当您在元素上使用 .col-sm-4 时，表示元素将采用4列中的12个总宽度。
在逻辑上，这意味着如果使用 .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>专案1< / h5> 
< div class =labels> 
< label>技术堆栈< / 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％。

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之间的区别是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！