本文详解如何通过 css 重置、flex 布局优化与响应式断点控制，彻底解决 bootstrap 卡片中列表项在小屏幕下文字溢出、宽度失控、绝对定位导致布局崩溃等问题。
在构建响应式服务卡片时，内容溢出（overflow）是初学者高频踩坑问题——尤其当使用 position: absolute、固定宽高（如 width: 550px）和未约束文本流时，小屏设备上文字会突破容器边界，破坏整体布局（如您截图所示）。根本原因在于：脱离文档流 + 缺乏弹性约束 + 响应式规则覆盖不全。
下面提供一套完整、可复用的修复方案，兼顾语义性、可维护性与跨设备兼容性：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
✅ 核心修复策略
- 移除危险声明：删除 .services-list { position: absolute; } —— 绝对定位是溢出主因，它使列表脱离父容器尺寸约束；
- 启用弹性布局：用 display: flex; flex-direction: column; 替代硬编码高度，让列表项自然堆叠并自适应内容；
- 添加文本防护：对 <li> 内文字启用省略与换行控制；
- 重写响应式断点：使用 Bootstrap 推荐的断点（如 @media (max-width: 768px)），并为移动端重设字体、内边距与最大宽度。
✅ 修复后的关键 CSS（推荐替换原样式）
#services-card {
background-color: lightgreen;
padding: 2rem 1.5rem; /* 改用 rem 提升可读性与缩放一致性 */
text-align: center;
font-family: "Ubuntu", -apple-system, sans-serif;
}
.services-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem; /* 替代手动 pt/pl，更简洁可控 */
}
.services-list li {
padding: 0.75rem 1rem;
border-radius: 6px;
white-space: normal; /* 允许换行 */
word-break: break-word; /* 长单词/URL 自动折行 */
overflow: hidden; /* 防止超长无空格字符串溢出 */
}
.card-back,
.card-white {
background-color: #55F007;
color: #333;
transition: all 0.2s ease;
cursor: pointer;
}
.card-white {
background-color: #fff;
}
/* 悬停效果保留，但移除固定宽高干扰 */
.card-back:hover,
.card-white:hover {
font-weight: 600;
color: #e60073;
box-shadow: 0 4px 8px rgba(230, 0, 115, 0.2);
}
/* 移动端优先：小屏下精简内边距 & 字号 */
@media (max-width: 768px) {
#services-card h2 {
font-size: 1.5rem;
}
.services-cards-para {
font-size: 0.95rem;
margin-bottom: 1.2rem;
}
.services-list li {
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
}
.card-body {
padding: 1rem;
}
}
/* 平板及以上：利用 Bootstrap 栅格自动分栏 */
@media (min-width: 769px) {
.services-list li {
font-size: 1rem;
}
}✅ HTML 微调建议（增强语义与可访问性）
- 移除重复的 pl-3 / pt-2 等 Bootstrap 工具类（CSS 中已统一控制）；
- 为图标添加 aria-hidden="true"，并为文字补充 <span class="sr-only">→</span> 提升无障碍支持；
- 示例优化片段：
<li class="card-back"> <i class="fa-solid fa-arrow-right" aria-hidden="true"></i> <span class="pl-2">Food License (FSSAI)</span> </li>
⚠️ 注意事项
- ❌ 避免在响应式项目中使用 px 固定宽高（如 width: 550px），改用 max-width: 100% 或 flex: 1；
- ❌ 不要对 ul 使用 position: absolute，除非有明确的层叠需求（此时必须配合 top/left 和父容器 position: relative）；
- ✅ 优先使用 Bootstrap 5+ 的 Utility API（如 d-flex flex-column gap-2）替代自定义类，提升开发效率；
- ✅ 所有交互元素（如 .card-back）应确保最小点击区域 ≥ 44×44px（移动端友好）。
✅ 最终效果验证要点
| 设备类型 | 预期行为 |
|---|---|
| 手机（<576px） | 列表垂直堆叠，文字自动换行，无横向滚动，卡片宽度占满视口 |
| 平板（576–992px） | 两列卡片并排，每列内列表紧凑显示，图标与文字对齐清晰 |
| 桌面（≥992px） | 布局稳定，悬停动效流畅，阴影不遮挡相邻内容 |
通过以上调整，您的服务卡片将真正实现「内容不溢出、样式不崩坏、小屏可阅读、大屏有层次」的响应式目标。记住：响应式不是“适配屏幕”，而是“尊重内容” —— 让 CSS 服务于信息，而非束缚它。
