0

0

浅谈Bootstrap网格布局中怎么进行列换行

青灯夜游

青灯夜游

发布时间:2021-11-17 19:13:13

|

8310人浏览过

|

来源于掘金社区

转载

本篇文章带大家一起了解一下bootstrap网格布局中的换行问题,看看网格列如何换行,希望对大家有所帮助!

浅谈Bootstrap网格布局中怎么进行列换行

1、网格布局中换行常见问题

在上几节中已经或多或少的介绍了一些关于网格换行的相关知识,在代码中也有相关的演示,本节课将对换行再次单独拿出来详细讲一下,因为如果对换行的相关知识掌握不熟练,很容易造成网页排版出现很大偏差,或者出现莫名其妙的问题。另外,以前讲的时候大多数正好符合满行,例如4列分2行,但是出问题的往往是不满行的,例如3列或者5列分两行,则最后的一行如何显示方式一不注意就很容易出问题。【相关推荐:《bootstrap教程》】

网格换行常见问题:

  • 该换行的地方不换行

  • 不该换行的地方换行了

  • 自动换行的最后一行排版混乱

2、列的换行

2.1 .row-cols-*用法

我们前面使用的row都是一个单纯的

,事实上,对于row也可以进一步的使用row-cols-*类快速设置最能呈现内容和布局的列数。普通的.col-*类应用于各个列(例如.col-md-4),而row-cols-*类是作为快捷方式在父.row上设置的。

.row-cols-*的星号可以写数字,数字代表一行要显示的列数,而不是宽度,这一点不要和普通的.col-*相混淆。另外还可以使用.row-cols-auto自适应宽度,不过这样一来,布局很可能会脱离你的控制。

下面还是用代码来演示以下:



  
    
    
    
    
    
     网格行列演示
  
  
  
    
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?

显示结果如下

1.png

零一万物开放平台
零一万物开放平台

零一万物大模型开放平台

下载

试着把row-cols-3中的3改为2、4、5、6等查看效果。 有没有发现还有个小惊喜,通过设置列的宽度col-我们没法平均一行显示5列,但是通过设置row-cols-5就可以实现了。

2.2 .row-cols-*-*用法

跟设置列的宽度一样,设置行数也支持响应式设计,如下代码展示了其具体用法,注意不存在row-cols-xs-1这样的类,请使用row-cols-1,也就是默认不写就是最小的屏幕。



  
    
    
    
    
    
     网格行列演示
  
  
  
    
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?
Bootstrap是什么?

响应式效果动画

2.gif

2.3 超宽换行

当一个row中,每个单元格都设置了宽度数值,当一行中,剩下的宽度已经放不下下一个单元格的时候,会自动换行。这部分内容我已经在“第四节Bootstrap网页布局网格系统”做了详细的讲解和演示,在此就不在细讲了,如果有不明白的地方还请4.2.4节内容。

2.4 强制换行

在Bootstrap 不改变每列的宽度强制换行通常添加多个row来完成的,但是有时候需要在一个row内的某个列后强制换行,这时候可以使用一个小技巧:后需要换行的地方,添加一个宽度为100%,高度为0的div来实现强制换行。

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

本来显示在一行的,显示成两行。

3.png

更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

467

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.7万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号