开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

bootstrap row-cols-sm-1不适用于卡。两张卡片出现在手机屏幕上，而它应该是1

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。它使用栅格系统来布局页面内容。栅格系统基于行（row）和列（col）的组合，通过预定义的类来控制不同屏幕尺寸下的列宽。

row-cols-sm-1 是 Bootstrap 5 中的一个类，用于在小屏幕（sm）及以上设备上将每行设置为只有一列。

相关优势

响应式设计：Bootstrap 的栅格系统使得页面能够自动适应不同屏幕尺寸，提供良好的用户体验。
灵活性：通过简单的类名，可以快速调整布局，减少手动编写 CSS 的工作量。

类型

Bootstrap 的栅格系统有以下几种主要的类：

row：定义行。
col：定义列。
col-*：定义列在不同屏幕尺寸下的宽度，例如 col-sm-1 表示在小屏幕及以上设备上每行只有一列。

应用场景

栅格系统广泛应用于需要响应式布局的网站，如博客、电商网站、企业官网等。

问题分析

如果你发现 row-cols-sm-1 不适用于卡片（card），导致两张卡片出现在手机屏幕上，而你期望的是每行只显示一张卡片，可能是以下原因：

卡片容器未正确使用：确保卡片容器使用了 Bootstrap 的栅格系统类。
CSS 冲突：可能存在其他 CSS 样式影响了 Bootstrap 的默认行为。
Bootstrap 版本问题：确保你使用的是 Bootstrap 5，因为 row-cols-* 类是在 Bootstrap 5 中引入的。

解决方法

以下是一个示例代码，展示如何正确使用 row-cols-sm-1 类：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row row-cols-sm-1">
      <div class="col mb-4">
        <div class="card">
          <img src="https://via.placeholder.com/300" 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>
          </div>
        </div>
      </div>
      <div class="col mb-4">
        <div class="card">
          <img src="https://via.placeholder.com/300" 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>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

参考链接

通过上述代码和参考链接，你应该能够解决 row-cols-sm-1 不适用于卡片的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Android 手表应用开发设计规范【译】

二维选择卡　　二维选择卡很适合展现一个系列的选项。比如 Google 搜索结果页就是一个很好的范例。 ? 这种样式可被用于展现单一纵向列表，或“一维选项” ?...这种情况下就不适合用卡片操作按钮的形式。　•卡片操作按钮应该是不需要文字说明也能明确命令含义的操作。　...•除了在手机上打开某个网页链接这种情况以外，卡片操作按钮触发的结果都应该是在手表上直接显示的。　•每张卡片上只允许有一个操作按钮。　•不要在卡片上放置命令菜单。...二维选择卡　　二维选择卡可以从提示卡片或者动作按钮来触发。它允许用户从一列选项中选择一个，比如签到应用中，可以用二维选择卡片来切换选择要签到的地点。 ? 　　...图1总结了各种手势的类型及用途。遵循以下原则：表盘交互应该是轻量的，用户只需一两次操作即可完成预期动作。　　　　　　　　 ?

4K7 0

浅谈NFC、RFID、红外、蓝牙的区别

NFC由非接触式射频识别(RFID)及互联互通技术整合演变而来,在单一芯片上结合感应式读卡器、感应式卡片和点对点的功能，能在短距离内与兼容设备进行识别和数据交换。...它通过无线电讯号识别特定的目标，并读写相关的数据，而不需要识别系统与这个目标有机械或者是光学接触。它无须人工干预，可用于各种恶劣环境，可识别高速运动的物体，可同时识别多个标签，操作快捷方便。...主标签粘贴于手机外壳内，从标签外形于普通磁卡一致，用于手机不适合的环境。由于没有手机的在线支持，因此从标签在支持的业务类型上相对于主标签要少，主要是一些小额的离线支付业务。...NFC设备可以用作非接触式智能卡、智能卡的读写器终端以及设备对设备的数据传输链路，其应用主要可分为以下四个基本类型：用于付款和购票、用于电子票证、用于智能媒体以及用于交换、传输数据。...需要的操作也简单，等待，看屏幕确认信息。而手机对手机的使用场景简直反人类。 ?

4.4K5 1

玻璃拟态（Glassmorphism）设计风格

它不适用于按钮或开关（这些重要的界面元素应该具备高对比度，更加清晰明确），模糊效果也要注意分寸，屏幕上过度使用模糊效果，会使整个 UI 对某些用户可阅读性差，同时也会使页面看起来显脏。...与任何基于卡片的布局一样，第一个是-物体离我们越近，它吸引的光越多。在这种情况下，这意味着它将更加透明。...整个效果的基础是阴影、透明度和背景模糊的组合，这种风格只能使用一个透明层，或者多个透明层，但当至少两个半透明层出现在一个相当繁忙的彩色背景上时，它是最突出和可见的。...细节你可以尝试的最后一件事是为形状添加1px内边框，并具有一定的透明度。它模拟玻璃边缘，可以使形状从背景中脱颖而出。...仅当这些透明效果只是装饰性的，而不是体验的组成部分时，才会发生这种情况。应避免将它们用于按钮或切换（这些重要的对象应始终具有更大的对比度），但你可以将其用于卡背景。

1.9K3 0

HTML5 拖放API与Vue.js实战

通常看板要有列和卡片。卡片是要执行的单个项目或任务，列用来显示特定卡片的状态。所以需要创建三个 Vue 组件：一个用于列，一个用于卡片，最后一个用于创建新卡片。...所以可拖动组件应该是 Card 组件，而放置目标是 Column 组件。...存储这个数据格式并导出它，因为在删除卡后获取数据时，Column 组件将会用到它。最后，将 card 的透明度降低到 0.2 ，以便向用户提供一些反馈，表明该卡实际上已被拉出其原始位置。...拖动完成后，再把透明度恢复为 1。现在可以拖动卡片了。接下来添加放置目标。...把 dragover 设置为 drop-enabled 将卡片拖到列组件上时，会立即触发 dragover 事件，将卡放入列中后会触发 drop 事件。要使卡片掉落到列中，需要侦听这些事件。

4.3K1 0

终极指南！超全面的UI动效基本规则总结

而超过1秒的动效会让人有迟滞感。在手机这样的移动端设备上，动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。 ?...△ 避免使用弹跳特效，它会分散用户的注意力元素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果，模糊的动效不适合在 UI界面中使用。 ?...△ 以加速运动将卡片扔出屏幕动画曲线有助于正确传达讯息，甚至表达情绪和感觉。...△ 减速曲线减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。 ?...△ 卡片元素从屏幕上运动的时候，不对称的缓动曲线当元素从屏幕上消失的时候，采用了相同的不对称缓动曲线，用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。 ?

1.6K2 0

13款Apple Watch 中文应用初体验：不及自带功能实用和有趣，期待下一版本

我在体验 Apple Watch 后核心结论是这样的： 1.它适合消息推送类应用。...3.它不适合流式内容。 PC 时代的软件和网站最初都是条目类内容，社交网络、移动 App 则带来了信息流，微信、微博、淘宝、卡片式应用都是流式内容，造就了一个词叫“刷”。...Apple Watch 上不会再有“刷”，信息流很难有生存空间。同样它也不适合浏览和导航类内容。它更适合“独立的、推送的点式内容”，比如手气不错这样的功能。豆瓣 FM只给你推荐一首歌。...手机百度呈现卡片式新闻、天气和股价，后两者 Apple Watch 自带了，卡片式新闻基于搜索指数排名，与网易新闻、腾讯新闻定位相似。文字搜索目前在 Apple Watch 难有用武之地。 ?...6.难以摆脱手机，任何应用都是建立在 iPhone 逻辑上，它只是一个助理，很多时候都要配合使用欧，比如相机拍照、播放音乐，但除了折腾，并无真正实用的场景。

1.6K6 0

【软件开发规范七】《Android UI设计规范》

目录 1. 基础常识 1.1 主流屏幕尺寸 1.2 图标尺寸 1.3 颜色值 1.4 标注 1.5 切图 2....这里有一个前提，所有的元素的厚度都是1dp。所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。...一些复杂的操作，尤其是每个决策都需要相关解释说明的情况下是不适合使用 Dialog 形式的。编辑 Dialog 包含了一个标题(可选)，内容，事件。标题：主要是用于简单描述下选择类型。...Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。编辑不一定要用户响应的提示，可以使用Snackbars。非常重要的提示，必须用户来决定的，应该用对话框。 ...手机端的侧边抽屉距离屏幕右侧56dp。编辑侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。

5.1K2 0

15 个优秀的响应式 CSS 框架

1. Bootstrap ? Bootstrap 最受欢迎 Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先项目。...如果你需要易用的实用工具库，那么这应该是一个不错的选择。官网：https://tachyons.io/ 4. Foundation ?...Pure 具有开箱即用的响应能力，所以元素在所有屏幕尺寸上都看起来不错。官网：http://purecss.io/ 8....以在它的基础上根据自己的需要添加样式和响应实用工具。官网：https://picturepan2.github.io/spectre/ 15. Base CSS Framework ?...设计机构通常选择 Bootstrap，因为它提供了开箱即用的组件，并且易于定制。这就是 Bootstrap 主题和库数量众多的原因. ----

11.1K1 0

动手实践：美化 Jenkins 报告插件的用户界面

bootstrap4-api-plugin:为 Jenkins 插件提供 Bootstrap 4。Bootstrap 自称是世界上最流行的前端组件库，用于在 Web 上构建响应式，移动优先的项目。...Font Awesome 具有矢量图标和社交徽标，号称是网络上最受欢迎的图标集和工具包。目前，它包含 1,500 多个免费图标。...整个视图将被放入一个充满整个屏幕（宽度为100％）的流体容器中。视图的新行由类 row 指定。附加类 py-3 定义了用于此行的填充，有关更多详细信息，请参见 Bootstrap Spacing。...第 1 行只有一列，它将填满整个可用空间。您还可以根据屏幕的实际可见大小为一行指定不同的列布局。这有助于改善大屏幕的布局。...在以下代码片段中，您可以看到此标签的使用情况（嵌入在 Bootstrap 卡片中，请参见第 5.3 节）: index.jelly 1 <?

6.1K1 0

Bootstrap：构建响应式网站的首选框架

响应式设计 Bootstrap专注于响应式设计，能够自动适应不同大小的屏幕，从而确保网站在各种设备上都能够提供良好的用户体验。...无论是在桌面电脑、平板电脑还是手机上访问，Bootstrap都能够呈现出优雅的界面布局和功能。 2....页面使用了 Bootstrap 的容器（container）、标题（h1）、段落（p）和卡片（card）等组件，通过添加相应的 Bootstrap 类名来应用样式。...卡片组件包含了卡片标题（card-title）、卡片文本（card-text）和按钮（btn）等子组件，展示了 Bootstrap 的组件化设计和响应式布局。...如果你还没有尝试过Bootstrap，不妨立即开始，体验它带来的便捷和效率吧！

5191 0

为什么我们不擅长 CSS

（在这个例子中，就是这张卡片看起来如何）转移到标记中的类名上，而不是在我们的CSS中添加新的类名。... 当然，我们可能还想使用其他灵活的属性，但我坚信需要时才添加，而不是试图考虑所有可能的使用情况。就这张卡而言，这已经足够了。...我们可以使用 width >= 图像当设计师在大屏幕和小屏幕之间采用完全不同的设计时，我有点抓狂。我会尽我所能让它发挥作用。在这里，我们的图像会从一个小圆圈变成大屏幕上的全尺寸图像。...在大屏幕上，我们使用自定义属性来覆盖图像的宽度。...我们还需要考虑头像在小屏幕上的定位问题。这就需要一些只出现在小屏幕上的实用类。是的，这些类名有点冗长，但我觉得它们比 md:h-auto 更清晰，而且还利用了逻辑属性。

1941 0

《HarmonyOS实战—入门到开发，浅析原子化服务》

它具有随处可见、跨设备、服务直达等特性：（1）服务发现：原子化服务可在服务中心发现并使用。...（5）支持多端协同：例如手机用作文档翻页和批注，配合智慧屏显示完成分布式办公；手机作为手柄，与智慧屏配合玩游戏。...服务卡片相信不少朋友第一次听到 “服务卡片” 这个词汇，都会在想：这不就是我手机屏幕上的 “小组件” 吗？哎！你还别说，它们之间还真有不同之处，但又有异曲同工之妙。 ...首先呢，大家可以回想一下我们日常使用电子产品的操作习惯，我们在使用小组件的时候：比如在主屏幕上新添加一个 “照片” 的小组件，这个小组件可以实现不定期的自动更换、主题筛选、人物分类等等这些功能。...在鸿蒙的设计中，服务卡片的引入是与以往EMUI最大的不同，在屏幕上我们只需要找到图标下方有 “小横线” 的app，当然，这些也正是那些支持HarmonyOS的app。

8072 0

STM32项目设计：基于stm32f4的智能门锁（附项目视频全套教程、源码资料）

二、项目功能要求 1、可通过指纹模块增删查改家庭成员的指纹信息，增删查改是否成功的相关信息显示在OLED屏幕上 2、在指纹匹配过程中，如果采集的指纹与指纹模块库相匹配，OLED显示匹配成功，并转动步进电机一圈...; //挂载SD卡 f_mount(fs[1],"1:",1); //挂载FLASH....详细连接方法参考指纹模块资料（3）解锁后就可以进行设置密码和录入卡片等操作移植汉字库：（如果没有SD卡接口可以自己汉字取模显示）（1）准备一个sd卡，一个读卡器，用来存储汉字库，显示到...软件，先打开图片，按照如下配置，点击保存，会生成取模代码六、知识扫盲（一）汉字的显示（具体代码参考正点原子“汉字显示实验”） 1、汉字的显示原理 1）学习过屏幕驱动的应该都知道，屏幕的显示无非就是在屏幕上打相应颜色的点...表示压力很大 4)需要把汉字库保存到SD卡，再将SD卡中的汉字库数据保存到外部FILASH才行，w25q128无疑是个好选择，它拥有16M的存储空间，SPI通信协议，读写速度也是相当快。

2.6K2 0

stm32f411中文手册(基于stm32f407)

二、项目功能要求 1、可通过指纹模块增删查改家庭成员的指纹信息，增删查改是否成功的相关信息显示在OLED屏幕上 2、在指纹匹配过程中，如果采集的指纹与指纹模块库相匹配，OLED显示匹配成功，并转动步进电机一圈...; //挂载SD卡 f_mount(fs[1],"1:",1); //挂载FLASH....详细连接方法参考指纹模块资料（3）解锁后就可以进行设置密码和录入卡片等操作移植汉字库：（如果没有SD卡接口可以自己汉字取模显示）（1）准备一个sd卡，一个读卡器，用来存储汉字库，显示到...软件，先打开图片，按照如下配置，点击保存，会生成取模代码六、知识扫盲（一）汉字的显示（具体代码参考正点原子“汉字显示实验”） 1、汉字的显示原理 1）学习过屏幕驱动的应该都知道，屏幕的显示无非就是在屏幕上打相应颜色的点...表示压力很大 4)需要把汉字库保存到SD卡，再将SD卡中的汉字库数据保存到外部FILASH才行，w25q128无疑是个好选择，它拥有16M的存储空间，SPI通信协议，读写速度也是相当快。

1.6K1 0

实战！半小时写一个脑力小游戏

这组卡片将被包装在一个 section容器元素中。最终代码如下： ? CSS 我们将使用一个简单但非常有用的配置，把它应用于所有项目： ?...这时页面模版看上去应该是这样： ? 我们还需要添加一个点击效果。每次元素被点击时都会触发 :active伪类，它引发一个 0.2秒的过渡： ?...如果匹配的话，则调用 disableCards()并分离两个卡上的事件侦听器，以防止再次翻转。...否则 unflipCards()会将两张卡都恢复成超过 1500 毫秒的超时，从而删除 .flip类：把代码组合起来： ?...点击同一个卡片仍然是玩家可以在同一张卡上点击两次的情况。如果匹配条件判断为 true，从该卡上删除事件侦听器。 ?

1.7K2 0

【实战】RFID Hacking(1)：看我如何突破门禁潜入FreeBuf大本营

，缺少安全密钥体系的设计，而ID卡是很容易可复制的载体，导致此类门禁很容易在极短时间内被破解和复制。...手机用户凭着配置了支付功能的手机就可以行遍全国：他们的手机可以用作机场登机验证、大厦的门禁钥匙、交通一卡通、信用卡、支付卡等等 NFC与RFID RFID:射频识别技术，它主要是通过无线电讯号识别特定目标...目前，非接触式卡片的有效读取距离一般为50～200mm,最远读取距离可达数米(应用在停车场管理系统)。门禁卡（属于智能IC卡）主要是如下几种卡：EM卡、M1卡、TM卡和CPU卡等等。...目前IC卡已经十分广泛地应用于包括金融、交通、社保等。 IC卡中有一种只读卡（只能通过读卡器读出卡号（ID号），而且卡号是固化（不能修改）的，不能往卡的分区再写数据，这种非接触卡我们把它称为ID卡。...虽然M1卡可以对存储信息进行加密，但复制过程并不需要解密，两张卡之间复制信息，就像电脑之间用U盘拷贝资料一样，读取和写入都无需破解，复制的卡一样可以使用。

4.4K7 0

前端|BootStrap4根据设备选择显示效果

相同的是中间内容部分，不同的是电脑端只显示其独有的顶部导航栏，而手机端显示其独有的顶部轮播图及底部导航栏。也就是说这个页面包含两个导航栏、一个轮播图、一个内容展示区域。..." content="width=device-width, initial-scale=1, shrink-to-fit=no"> 首先将所有模块写入页面中(借用BootStrap框架事半功倍)，所用到的...BootStrap4组件主要包括导航栏、轮播图、卡片，并做了些许修改，效果如下。...图四根据设备大小选择显示效果的样式名表格注意区分block和none，并且两者都是作用于某个屏幕大小的区间。 ? 图五电脑端导航栏添加显示样式 ?...图六手机端轮播图添加显示样式源码链接：https://pan.baidu.com/s/1mSi53plhdNTbUhzyWgo1vQ 提取码：h2h1 总结这样做的好处可以提升页面显示效果及用户体验

1.5K2 0

使用 Python 和 OpenCV 构建 SET 求解器

每张 SET 卡都有四个属性：形状、阴影/填充、颜色和计数。下面是一个带有一些卡片描述的十二张卡片布局示例。...另外：识别卡片属性的另一种方法可能是将有监督的 ML 分类模型应用于卡片图像。...方法 2：验证 SET Key 请注意，对于一副牌中的任意两张牌，只有一张牌（并且只有一张牌）可以完成 SET，我们称这第三张卡为SET Key。...方法 1 的一种更有效的替代方法是迭代地选择两张卡片，计算它们的 SET 密钥，并检查该密钥是否出现在剩余的卡片中。...在 Python 中检查 Set() 结构的成员资格的平均时间复杂度为 O (1)。这将算法的时间复杂度降低到 O( n²)，因为它减少了需要评估的组合数量。

1.3K6 0

GUI界面如何设计？？｜Mixlab指南推荐

为示例，请看图1：图1 iOS 13（左）和iOS 14（右）图1的左侧两张图中，iOS 13的Siri占据了整个屏幕大小，该设计被笔者称为“应用级语音交互”。...图1的右侧两张图中，iOS 14的Siri占据了屏幕的一部分显示相关内容，它的好处是比占满全屏的语音助手看起来轻量得多，但是它跟后者没有本质差别，因为它还是和其他的界面分隔开，双方的数据和交互任务基本做不到互通...最早采用该设计方式的设备是大屏设备和电脑设备，例如Android TV上的Google Assistant和MacOS上的Siri，因为语音助手显示的内容较少，无需占满整个屏幕，相关细节请看下图2和图3...，还会在座舱前方中央放置一个实体机器人Nomi；而小鹏汽车G3和P7的语音助手小P也会显示在中控屏幕的上方。...现有绝大部分语音助手的状态显示会和ASR在位置上强绑定，因此它们相当于一个输入框。如果输入框显示在上方，而最新的内容显示在底部，用户很有可能会觉得困扰。

1.1K3 0

量子物理学的四个常见误解：薛定谔的猫、无人理解量子力学……

但是，当我们通过狭缝一个接一个地发送光子流时，它会在狭缝后面的投影屏幕上产生两条波形相互干涉的图案。...但这并不意味着量子干涉在生物系统中不会存在，只是它通常不适用于猫或人类等大型生物。 2....但是要想理解量子力学，你必须想象信封内的两张卡片处于联合叠加状态，这意味着它们同时都是橙色和蓝色（确切来说就是橙色 / 蓝色和蓝色 / 橙色）。...我们可以强行赋予卡片以一组不同的颜色，类似于进行另一种类型的测试。此时我们可以打开一个信封并问这样的问题：「你拿的绿卡还是红卡？」。答案将再次是随机的：绿色或红色。...但从 21 世纪的角度来看，量子物理学对于科学家来说在数学上和概念上理解都不是特别困难。我们非常好地了解它，以至于我们可以高精度地预测量子现象，模拟高度复杂的量子系统，甚至开始创建量子计算机。

3822 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭