Bootstrap基础教程最新章节_赵丙秀著

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 列的水平排列

2.4.2 无边距类

使用.no-gutters可以去掉.row元素的左/右外边距和.row下的.col列元素的左/右内边距。其定义如下。

.no-gutters{
  margin-right:0;
  margin-left:0;
>.col,
>[class*=＂col-＂]{
  padding-right:0;
  padding-left:0;
  }
}

【实例2-12】 （文件 guttergrid.html）

<div class=＂container＂>
    <div class=＂row no-gutters＂>
        <div class=＂col-12 col-sm-6 col-md-8＂>.col-12 .col-sm-6 .col-md-8</div>
        <div class=＂col-6 col-md-4＂>.col-6 .col-md-4</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-12 col-sm-6 col-md-8＂>.col-12 .col-sm-6 .col-md-8</div>
        <div class=＂col-6 col-md-4＂>.col-6 .col-md-4</div>
    </div>
</div>

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

图2-18 去掉 row外边距、col的内边距

说明：第1行，去掉了.row的左/右外边距-15px，去掉行中列的内边距15px。

2.4.3 居左/居右

使用.mr-auto和.ml-auto：让列居左或居右排列，具体参考4.5节。

●.mr-auto：使元素居左排列。

●.ml-auto：使元素居右排列。

●.col-auto：根据内容自适应列宽。

【实例2-13】（文件leftrightgrid.html）

<div class=＂container＂>
    <div class=＂row＂>
        <div class=＂col-md-4＂>.col-md-4</div>
        <div class=＂col-md-4 ml-auto＂>.col-md-4 .ml-auto</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-md-3 ml-md-auto＂>.col-md-3 .ml-md-auto</div>
        <div class=＂col-md-3 ml-md-auto＂>.col-md-3 .ml-md-auto</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-auto mr-auto＂>.col-auto .mr-auto</div>
        <div class=＂col-auto＂>.col-auto</div>
    </div>
</div>

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

图2-19 居左/居右排列的效果