面对不同寻常的换行需求：Bootstrap Card响应式倒序向下移动（观看尚硅谷Bootstrap视频P5栅格实例的小作业）

最新推荐文章于 2021-12-02 20:17:30 发布

蜜瓜虫豆豆

最新推荐文章于 2021-12-02 20:17:30 发布

阅读量847

点赞数 6

文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_42280724/article/details/111994262

版权

本文介绍了如何在Bootstrap中实现响应式Card布局，当屏幕尺寸变化时，让第一项元素先换行到第二行。通过查看Bootstrap官方文档、了解Grid系统和Order类，最终成功实现了客户的需求。内容包括视频推荐、资源引入、Card复制、版本迁移以及代码实现过程。

摘要由CSDN通过智能技术生成

视频地址

视频地址戳这：尚硅谷_bootstrap_栅格实例

强烈推荐这位老师讲的bootstrap（v3），视频P1~P6有讲到Grid的less源码，里面有大神写代码的思路，虽然现在bootstrap版本已经更新到v5了，但是依然很重要！

简略说一下这个视频的有趣之处~~~~~

在一个即将下班的幸福时刻，客户打来了电话：“喂，小明啊，你这个布局不对啊，是这样，浏览器屏幕缩小的时候，我要第一个格子先换到第二行，下班前交给我吧！”

啊这……开搞呗！想看最终呈现请直接跳转实现。

查看bootstrap官方文档

bootstrap已经更新到版本5 了（但我还是用的v4.3），大家可以参考我的思路看一下怎么去完成老师的小作业~

引入资源

注意：因为bootstrap要用到 jQuery，所以 jquery.min.js必须要在bootstrap.min.js之前（xxxxx.min.js 代表压缩过的资源）。以下介绍的2种方法可选用其一，更详细的介绍可移步官网（需要哪个版本把链接网址里的版本号改一下就行）。

从CDN（Content Delivery Network 内容分发网络）引入
[面包屑导航：Getting started > Introduction > 找到标题 CSS \ JS]

下载bootstrap资源包
[面包屑导航：Getting started > Download > 找到按钮 Download]

也可以直接复制引入模板
[面包屑导航：Getting started > Introduction > 找到标题 Starter template]

在这里简单介绍一下meta

来源于百度：meta提供文档最基本的元信息。meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定，对搜索引擎营销有重要作用。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

viewport 代表移动端适配
width=device-width 视区宽度为屏幕宽度
initial-scale=1 初始缩放比例为1，即不缩放显示原始网页
shrink-to-fit=no 使以上代码在ios9上生效，但部分编辑器不支持

提示：在meta里不要随意加空格，特别是双引号前后。

复制Card

[面包屑导航：Components > Card > 找到标题 Example]

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>