Bootstrap怎么设置Card卡片的边框在大屏显示在手机端隐藏的规则类-Bootstrap教程-PHP中文网

bootstrap 5 不支持 .border-{breakpoint}-0 类，无法单类实现“大屏显边框、小屏隐边框”，须用响应式边框组合或自定义 css 媒体查询控制。

bootstrap怎么设置card卡片的边框在大屏显示在手机端隐藏的规则类

Bootstrap 5 怎么用响应式工具类控制 Card 边框显隐

直接结论：Bootstrap 5 没有内置的 .border-{breakpoint}-0 类，不能靠单个类实现“大屏显示边框、小屏隐藏”，必须组合使用响应式边框类或自定义 CSS。

为什么 `.border` 和 `.border-0` 不支持断点？

Bootstrap 5 的边框工具类（如 .border、.border-top）默认全局生效，且不带断点前缀；而 .border-0 是强制移除所有边框，也没有 .border-md-0 这类变体——这是官方明确未提供的功能，不是你漏看了文档。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

常见错误现象：
- 写 <div class="card border border-md-0"> → 小屏边框依然存在，<code>border-md-0 根本不生效
- 以为 .d-none .d-md-block 能套在 .border 上 → 工具类不能这样叠加作用于同一元素的边框属性

两种可靠做法：响应式边框类组合 or 自定义 CSS

推荐优先用 Bootstrap 原生方式，避免额外样式污染：

给 Card 加 .border（默认全屏显示），再用 .border-md-0 → ❌ 不行，该类不存在
正确组合：class="border border-md" → ❌ 也不行，.border-md 不是合法类名
✅ 可行方案一（推荐）：
<div class="card border border-md-0"> 改为：<br><code><div class="card border border-md-0 border-lg"> → 仍无效，因为 <code>border-md-0 不存在
✅ 实际有效写法（利用现有类）：
<div class="card border border-md-0"> → 改用：<br><code><div class="card border border-md"> + 自定义 <code>@media (max-width: 767.98px) 下设 border: none
✅ 更干净的做法（推荐）：
添加自定义类，比如 .border-responsive，并在 CSS 中写：
```
@media (max-width: 767.98px) {
  .border-responsive {
    border: none !important;
  }
}
```
如果只针对某一边（比如只要大屏有底边框）：
<div class="card border-bottom border-bottom-md-0"> → 同样无效；应写：<br><code><div class="card border-bottom border-bottom-lg"> + 自定义媒体查询隐藏小屏底边<h3>注意 display 类不能替代边框控制</h3> <p>有人试过用 <code>.d-none .d-md-block 包裹一个 <div class="border"> 插进 Card body —— 这会破坏 Card 结构语义，且边框位置错乱。Card 的边框属于 <code>.card 元素自身盒模型，不能靠子元素模拟。
真正容易被忽略的一点：
Bootstrap 5 的 $enable-responsive-font-sizes 默认开启，但 $enable-responsive-utilities 也得为 true 才能生成响应式工具类（不过边框类本身就不生成断点变体，这点和 .d- 或 .m- 不同）。别在 Sass 配置里白费劲找 border-sm-0 —— 它压根没被定义。