网格系统-bootStrap4常用CSS笔记

.row 定义一行
.col 均分列数，最多一行12列。每列左右间隙各15px
.col-{1到12} 定义在所有屏幕下的列宽
.col-{sm|md|lg|xl}-{1到12} 定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px、lg:屏幕>=960px、xl:屏幕>=1200px
.offset-{1到11} 在所有屏幕下的列偏移
.offset-{sm|md|lg|xl}-{1到11} 在指定屏幕下的列偏移

 代码一：在所有尺寸屏幕下，均分三列

<div class="row">
  <div class="col bg-danger">1</div>
  <div class="col bg-dark">2</div>
  <div class="col bg-light">3</div>
</div>

代码二：在所有尺寸屏幕下，第一列占据50%，第二列占据25%，第三列占据25%

<div class="row">
  <div class="col-6 bg-primary">1</div>
  <div class="col bg-success">2</div>
  <div class="col bg-info">3</div>
</div>

代码三：在屏幕宽度>=960像素时，第一列占据50%，第二列占据10%，第三列占据25%，小于960像素的屏幕下，每列占据100%宽度

<div class="row">
  <div class="col-lg-6 bg-primary">1</div>
  <div class="col-lg-3 bg-success">2</div>
  <div class="col-lg-3 bg-info">3</div>
</div>

代码四：列1在所有屏幕尺寸下均向右偏移1个单元列的宽度。列2只在屏幕宽度>=960像素 时向右偏移1个单元列的宽度

<div class="row">
  <div class="col-lg-5 offset-1 bg-primary">1</div>
  <div class="col-lg-2 offset-lg-1 bg-success">2</div>
  <div class="col-lg-3 bg-info">3</div>
</div>

　　
posted @ 2019-03-25 23:01  1024记忆  阅读(702)  评论(0)  编辑  收藏  举报