本节课我们来开始学习 Bootstrap 的栅格对齐和排列，以实现更加灵活的布局操作。
一．栅格对齐
- 对于栅格系统中的行，我们可以其进行垂直对齐操作，如下表；
样式(作用域行间) 居顶(默认) .align-items-start 居中 .align-items-center 居底 .align-items-end
- 要实现垂直效果，需要给行.row 和列.c 设置高度；
<style> .row { height: 100px; margin: 20px 0; border: dashed 1px red; } .c { border: solid 1px blue; height: 30px; } </style>
- 如果我们要垂直居中，那么直接设置: .align-items-center
<div class="row align-items-center"> <div class="c col">第一列</div> <div class="c col">第二列</div> <div class="c col">第三列</div> </div>
- 对于列来说，也有三种垂直居中的方法，如下表；
样式(作用域行间) 居顶(默认) .align-self-start 居中 .align-self-center 居底 .align-self-end
- 使用三种列垂直方案；
<div class="row align-items-center"> <div class="c col align-self-start">第一列</div> <div class="c col align-self-center">第二列</div> <div class="c col align-self-end">第三列</div> </div>
- 如果我们要不足 100%填充的行实现水平对齐方式，参考下表；
样式(作用域行间) 居左(默认) .justify-content-start 居中 .justify-content-center 居右 .justify-content-end 间隔相等(分散) .justify-content-around 两端对齐(分散) .justify-content-between
- 每个列只占 3 个栅格列，共 3 列，然后实现间隔相等分散对齐；
<div class="row justify-content-around"> <div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3">第三列</div> </div>
栅格排列
- 栅格的列可以排序，使用.order-N，N 最大值为 12；
- 如果我们要给一个三列的行的第一列排到最后，可以如下设置；
<div class="row"> <div class="c col-3 order-3">第一列</div> <div class="c col-3 order-2">第二列</div> <div class="c col-3 order-1">第三列</div> </div>
- 使用.order-first，强行设置列为第一列，而.order-last 为最后一列；
<div class="row align-items-start"> <div class="c col-3 order-last">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3 order-first">第三列</div> </div>
- 使用.offset-N 或.offset-*-N 来设置列的偏移量，1 表示一个栅格列；
<div class="row align-items-start"> <div class="c col-3 offset-1">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3 offset-1">第三列</div> </div>
- 使用.ml-N 或.mr-N 来微调列距离，使用.ml-auto 和.mr-auto 来左右对齐；
<div class="row align-items-start"> <div class="c col-3">第一列</div> <div class="c col-3 ml-2">第二列</div> <div class="c col-3 ml-auto">第三列</div> </div>
练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <style> .row{ border: red dashed 2px; height: 100px; margin: 20px 0; } .haha{ border: blue solid 1px; height: 30px; } </style> </head> <body> <div class="container"> <div class="row align-items-center justify-content-between"> <div class="haha col-sm-1 bg-danger align-self-lg-start">1</div> <div class="haha col-sm-1 bg-warning">1</div> <div class="haha col-sm-1 bg-primary align-self-lg-end">1</div> <div class="haha col-sm-1 bg-light">1</div> <div class="haha col-sm-1 bg-dark align-self-lg-start">1</div> <div class="haha col-sm-1 bg-info">1</div> <div class="haha col-sm-1 bg-success align-self-lg-end">1</div> </div> <div class="row align-items-center justify-content-between"> <div class="haha col-sm-1 bg-danger align-self-lg-start order-6">1</div> <div class="haha col-sm-1 bg-warning order-7">1</div> <div class="haha col-sm-1 bg-primary align-self-lg-end">1</div> <div class="haha col-sm-1 bg-light">1</div> <div class="haha col-sm-1 bg-dark align-self-lg-start">1</div> <div class="haha col-sm-1 bg-info">1</div> <div class="haha col-sm-1 bg-success align-self-lg-end">1</div> </div> </div> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </body> </html>
网友评论