• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Bootstrap网格布局怎么进行列换行

武飞扬头像
PHP中文网
帮助381

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

网格换行常见问题:

  • 该换行的地方不换行

  • 不该换行的地方换行了

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

2、列的换行

2.1 .row-cols-*用法

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

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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="https://www.swvq.com/bootstrap/bootstrap5/bootstrap.min.css" rel="stylesheet">
     <title>网格行列演示</title>
  </head>
  <body>
  
    <div>
        <div class="row row-cols-3">
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
        </div>
    </div>
 
     <script src="https://www.swvq.com/bootstrap/bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

显示结果如下

学新通技术网

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

2.2 .row-cols-*-*用法

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="https://www.swvq.com/bootstrap/bootstrap5/bootstrap.min.css" rel="stylesheet">
     <title>网格行列演示</title>
  </head>
  <body>
  
    <div>
        <div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
            <div>
               Bootstrap是什么?  
            </div>
        </div>
    </div>
 
     <script src="https://www.swvq.com/bootstrap/bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

响应式效果动画

学新通技术网

2.3 超宽换行

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

2.4 强制换行

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

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

<!-- 此处强制换行 -->
<div class="w-100"></div>

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

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

学新通技术网

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

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfcheg
系列文章
更多 icon
同类精品
更多 icon
继续加载