学习 Bootstrap 5 之Colunms
作者：互联网
学习 Bootstrap 5 之 列
- 列 (Columns)
- 1. 列在垂直方向的对齐方式 (整行都发生变化)
- 2. 列在垂直方向的对齐方式 (指定列发生变化)
- 3. 列在水平方向的对齐方式 (整行中的列发生变化)
- 4. 列的对齐方式总结
- 5. 列分隔 class = "w-100"
- 6. 列换行 (Column wrapping)
- 7. 列重组 (Reordering)
- 8. 偏移 offset-N
列 (Columns)
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