Bootstrap基础教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.4 结合其他工具类使用

2.4.1 排列

利用flexbox排列工具，我们可以对各列进行垂直或水平排列。

1.垂直排列

将类.align-items-start、.align-items-center、.align-items-end 应用在.row 元素上，实现整行内容在垂直方向的顶部、中间、底部排列。如【实例2-10】的前3行代码。

将类.align-self-start、.align-self-start、.align-self-start应用在列上，可以实现多列的错位排列。具体使用方法如【实例2-10】所示。

【实例2-10】（文件 valigngrid .html）

<!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.min.css＂/>
      <style>
          .row{
              margin-bottom:15px;
              height:100px;
              background-color:#eeeeee;
          }
          [class*=＂col＂]{
              padding-top:5px;
              padding-bottom:5px;
              background-color:rgba(86,61,124,0.15);
              border:1px solid rgba(86,61,124,.2);
          }
      </style>
  </head>
  <body>
      <div class=＂container＂>
        <div class=＂row align-items-start＂>
          <div class=＂col＂>第 1列</div>
          <div class=＂col＂>第 2列</div>
          <div class=＂col＂>第 3列</div>
        </div>
        <div class=＂row align-items-center＂>
          <div class=＂col＂>第 1列</div>
          <div class=＂col＂>第 2列</div>
          <div class=＂col＂>第 3列</div>
        </div>
        <div class=＂row align-items-end＂>
          <div class=＂col＂>第 1列</div>
          <div class=＂col＂>第 2列</div>
          <div class=＂col＂>第 3列</div>
        </div>
        <div class=＂row＂>
            <div class=＂col align-self-start＂>第1列</div>
            <div class=＂col align-self-center＂>第2列</div>
            <div class=＂col align-self-end＂>第 3列</div>
        </div>
      </div>
  </body>
</html>

以上代码在Chrome浏览器中的运行效果如图2-16所示。

图2-16 列的垂直排列

说明：在【实例2-10】中，设置了.row 元素的行高和背景。同时修改了列的上/下内边距。

2.水平排列

将flex工具中的内容排列类.justify-content-start、.justify-content-center、.justify-content-end、.justify-content-around和.justify-content-between应用在.row元素上，分别实现列的左排列、居中、右排列、平均分布、两端对齐。

【实例2-11】（文件haligngrid.html）

<div class=＂container＂>
    <div class=＂row justify-content-start＂>
        <div class=＂col-4＂>第 1列</div>
        <div class=＂col-4＂>第 2列</div>
    </div>
    <div class=＂row justify-content-center＂>
        <div class=＂col-4＂>第 1列</div>
        <div class=＂col-4＂>第 2列</div>
    </div>
    <div class=＂row justify-content-end＂>
        <div class=＂col-4＂>第 1列</div>
        <div class=＂col-4＂>第 2列</div>
    </div>
    <div class=＂row justify-content-around＂>
        <div class=＂col-4＂>第 1列</div>
        <div class=＂col-4＂>第 2列</div>
    </div>
    <div class=＂row justify-content-between＂>
        <div class=＂col-4＂>第 1列</div>
        <div class=＂col-4＂>第 2列</div>
    </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-17所示。

图2-17 列的水平排列

上一章目录下一章