Home > Web Front-end > HTML Tutorial > The meaning of col-xs, col-sm, col-md in bootstrap fence system css_html/css_WEB-ITnose

The meaning of col-xs, col-sm, col-md in bootstrap fence system css_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:48:02
Original
1719 people have browsed it

.col-xs-超小屏幕 手机 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面显示器 (≥992px)(栅格参数).不管在哪种屏幕上,栅格系统都会自动的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 div占的宽度。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是:1在超小屏幕中占6列 也就是屏幕的一半(6/12) 2.在中单屏幕中占3列也就是1/4(3/12)。 如果我们要在小屏幕上并排显示3个div(12/3=4),在大屏幕上显示6个 则col-xs-4 col-md-2这样我们就可以控制我们自己想要的什么排版了。还有一种情况是  <div class="col-sm-10 col-md-8"> 后面跟的div中col-sm的参数如果为3 也就是 <div class="col-sm-10 col-md-8"></div> <div class="col-sm-3 col-md-4"></div>如果是这样 这两个div在小屏幕中会排2排 因为10+3>12 ,在中等屏幕中可以排同一排 8+4=12
Copy after login


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template