Bootstrap如何调整网格系统的垂直与水平对齐方式？

本文共计1339个文字，预计阅读时间需要6分钟。

目录

1.Bootstrap 网格布局

1.1. 垂直对齐 1.1.1. row 标签中设置垂直对齐 1.1.2. col 标签中设置垂直对齐 2. 水平对齐 2.1. row 标签中设置垂直对齐

目录

• 1、Bootstrap网格布局
• 2、垂直对齐
• 2.1 row标签中设置垂直对齐
  
• 2.2 col标签中设置垂直对齐
  
• 3、水平对齐
• 3.1 row标签中设置垂直对齐
  

1、Bootstrap网格布局

上一节我们介绍了Bootstrap中的网格，网格在网页布局中是一个重点和难点，布局是网页设计的起点和基础，一定要花功夫弄懂，最起码把我写的教程介绍的内容弄懂，因为我写的都是最常用的和最基础的。当然对于一个有一定基础的网页设计师，这些内容相信一看就懂，今天我们进一步学习网格布局。

本节内容涉及到通用类的弹性盒子（Flex）中的部分功能。

2、垂直对齐

2.1 row标签中设置垂直对齐

通过在row标签中 添加align-items-start、align-items-center、align-items-end可以更改行在容器中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。