学习 Bootstrap 5 之Colunms

学习 Bootstrap 5 之 列

• 列 (Columns)
• • 1. 列在垂直方向的对齐方式 (整行都发生变化)
  • • (1). 居顶 class = "row align-items-start" (默认)
    • (2). 居中 class = "row align-items-center"
    • (3). 居低 class = "row align-items-end"
    • (4). 三种对齐方式的比较
  • 2. 列在垂直方向的对齐方式 (指定列发生变化)
  • • (1). 居顶 class = "col align-self-start" (默认)
    • (2). 居中 class = "col align-self-center"
    • (3). 居低 class = "col align-self-end"
    • (4). 三种对齐方式的比较
  • 3. 列在水平方向的对齐方式 (整行中的列发生变化)
  • • (1). 居左 class = "row justify-content-start" (默认)
    • (2). 居中 class = "row justify-content-center"
    • (3). 居右 class = "row justify-content-end"
    • (4). 两端对齐 class = "row justify-content-between"
    • (4). 列左右间隔相等 class = "row justify-content-around"
    • (5). 间隔相等 class = "row justify-content-evenly"
    • • justify-content-evenly 与 justify-content-around 的区别
    • (6). 五中对齐方式的比较
  • 4. 列的对齐方式总结
  • 5. 列分隔 class = "w-100"
  • 6. 列换行 (Column wrapping)
  • 7. 列重组 (Reordering)
  • • (1). 排序 order-N
    • (2). 排序中两种特殊的位置
    • • 1). 最前面 .order-first
      • 2). 最后面 .order-last
  • 8. 偏移 offset-N

列 (Columns)

Bootstrap 5 官方文档

1. 列在垂直方向的对齐方式 (整行都发生变化)

  用于行的高度大于行中每一个元素的高度情况, 之前的例子都是行列一样高的
注意: 这些类是使用在行中, 使用后整行的都会发生变化

(1). 居顶 class = “row align-items-start” (默认)

  <div class="container">
    <div class="row align-items-start" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(2). 居中 class = “row align-items-center”

  <div class="container">
    <div class="row align-items-center" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(3). 居低 class = “row align-items-end”

  <div class="container">
    <div class="row align-items-end" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(4). 三种对齐方式的比较

  <div class="container">
    <div class="row align-items-start" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
    <br />
    <div class="row align-items-center" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
    <br />
    <div class="row align-items-end" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

2. 列在垂直方向的对齐方式 (指定列发生变化)

  用于行的高度大于行中每一个元素的高度情况, 之前的例子都是一样高的
注意: 这些类是使用在列中, 用于使指定列发生变化

(1). 居顶 class = “col align-self-start” (默认)

(2). 居中 class = “col align-self-center”

(3). 居低 class = “col align-self-end”

(4). 三种对齐方式的比较

  <div class="container">
    <div class="row" style = "border:3px solid black; height:200px">
      <div class="col align-self-start" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col align-self-end" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

3. 列在水平方向的对齐方式 (整行中的列发生变化)

&emps;&emps;我为每一列都指定了宽度 (col-2), 但是它们都居左, 我想实现居中, 居右等效果, 该怎么办?

(1). 居左 class = “row justify-content-start” (默认)

  <div class="container">
    <div class="row align-items-center justify-content-start" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(2). 居中 class = “row justify-content-center”

  <div class="container">
    <div class="row align-items-center justify-content-center" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(3). 居右 class = “row justify-content-end”

  <div class="container">
    <div class="row align-items-center justify-content-end" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(4). 两端对齐 class = “row justify-content-between”

  <div class="container">
    <div class="row align-items-center justify-content-between" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(4). 列左右间隔相等 class = “row justify-content-around”

  <div class="container">
    <div class="row align-items-center justify-content-around" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(5). 间隔相等 class = “row justify-content-evenly”

  <div class="container">
    <div class="row align-items-center justify-content-evenly" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

justify-content-evenly 与 justify-content-around 的区别

around: 每一列左右两边都有间隔, 且间隔是相同的
evenly: 每一列两边的间隔都是相同的

(6). 五中对齐方式的比较

4. 列的对齐方式总结

类后缀	水平方向效果	垂直方向效果	默认方式
start	居左	居顶	√
center	居中	居中
end	居右	居下

类前缀	效果
align	垂直方向
justify	水平方向

类	作用对象	方向	效果
align-items-start	行	垂直	该行所有列中的区域都居顶
align-items-center	行	垂直	该行所有列中的区域都居中
align-items-end	行	垂直	该行所有列中的区域都居低
align-self-start	列	垂直	该列中的所有区域都居顶
align-self-center	列	垂直	该列中的所有区域都居中
align-self-end	列	垂直	该列中的所有区域都居低
justify-content-start	行	水平	该行所有列中的区域都居左
justify-content-center	行	水平	该行所有列中的区域都居中
justify-content-end	行	水平	该行所有列中的区域都居右
justify-content-between	行	水平	该行所有列中的区域都两端对齐
justify-content-around	行	水平	该行所有列中的区域都左右间距相等
justify-content-end-evenly	行	水平	该行所有列中的区域都等间距

5. 列分隔 class = “w-100”

一般用于分隔的区域是空区域

可以发现, 换行还是在一个大的行区域中, 两行中间并没有边框

  <div class="container">
    <div class="row">
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

<!--      强制换行-->
      <div class="w-100 d-none d-md-block"></div>

      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    </div>
  </div>
      <div class="row">
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

<!--      强制换行-->
      <div class="w-100 d-none d-md-block"></div>

      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    </div>
  </div>

分割区域加上边框

  <div class="container">
    <div class="row" style = "border:3px solid black; height:200px">
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>

<!--      强制换行-->
      <div class="w-100 d-none d-md-block" style = "border:2px solid purple;"></div>

      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
    </div>
    <div class="row" style = "border:3px solid black; height:200px">
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>

      <!--      强制换行-->
      <div class="w-100 d-none d-md-block" style = "border:2px solid purple;"></div>

      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
    </div>
  </div>

6. 列换行 (Column wrapping)

  如果一行中放置了 12 列以上，则最后从容纳不下的列开始, 换到下一行

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col-6" style = "border:1px solid red">
        占 6 列
      </div>
      <div class="col-9" style = "border:1px solid red">
        占 9 列
      </div>
    </div>
  </div>

7. 列重组 (Reordering)

(1). 排序 order-N

order-N N在1 - 5之间

order-{断点}-N N在1 - 5之间

指定了顺序后, 顺序小的一定在前, 但是没有指定顺序的, 永远在最前面

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        第一个 没有指定顺序
      </div>
      <div class="col order-5" style = "border:1px solid red">
        第二个 指定顺序 5
      </div>
      <div class="col" style = "border:1px solid red">
        第三个 没有指定顺序
      </div>
      <div class="col order-1" style = "border:1px solid red">
        第四个 指定顺序 1
      </div>
    </div>
  </div>

(2). 排序中两种特殊的位置

1). 最前面 .order-first

最前面

order-first

2). 最后面 .order-last

最后面

order-last

这两个位置优先于全部方式

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        第一个 没有指定顺序
      </div>
      <div class="col order-5" style = "border:1px solid red">
        第二个 指定顺序 5
      </div>
      <div class="col" style = "border:1px solid red">
        第三个 没有指定顺序
      </div>
      <div class="col order-1" style = "border:1px solid red">
        第四个 指定顺序 1
      </div>
      <div class="col order-first" style = "border:1px solid red">
        第五个 指定顺序 first
      </div>
      <div class="col order-last" style = "border:1px solid red">
        第六个 指定顺序 last
      </div>
      <div class="col order-3" style = "border:1px solid red">
        第七个 指定顺序 3
      </div>
    </div>
  </div>

8. 偏移 offset-N

offset-N N表示偏移的列数, 即前一列和当前列的间距

offset-{断点}-N N表示偏移的列数, 即前一列和当前列的间距

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-1" style = "border:1px solid red">
        第一个
      </div>
      <div class="col col-2 offset-2" style = "border:1px solid red">
        第二个
      </div>
      <div class="col col-1 offset-4" style = "border:1px solid red">
        第三个
      </div>
    </div>
  </div>