其他分享
首页 > 其他分享> > 学习 Bootstrap 5 之Colunms

学习 Bootstrap 5 之Colunms

作者:互联网

学习 Bootstrap 5 之 列

列 (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>

标签:content,Bootstrap,three,class,学习,Colunms,col,columns,justify
来源: https://blog.csdn.net/qq_37354060/article/details/122510635