怎么用Bootstrap制作友情链接滚动栏-Bootstrap教程-PHP中文网

应使用CSS动画替代标签，因其是HTML5废弃标签，存在兼容性、无障碍及响应式问题；推荐纯CSS @keyframes + flex容器实现水平左移滚动，支持hover暂停、移动端适配与Bootstrap兼容。

怎么用bootstrap制作友情链接滚动栏

友情链接滚动栏用 `marquee` 还是 CSS 动画？

别用 <marquee></marquee> —— 它是废弃标签，Chrome/Firefox 已不支持，即使渲染出来也无无障碍支持、无暂停控制、无法响应式适配。Bootstrap 本身也不提供滚动组件，得靠 CSS + 少量 JS 实现。

推荐方案：纯 CSS @keyframes + flex 容器 + overflow: hidden，兼容 Bootstrap 5/4，且能平滑滚动、支持 hover 暂停、适配移动端。

滚动方向统一用水平左移（transform: translateX()），避免 vertical 方向在 flex 布局中出错
所有链接必须包裹在同一个 <div class="friend-links"> 内，不能分多行写死结构 <li>Bootstrap 的 <code>.d-flex 和 .justify-content-start 会干扰动画，需显式重置 display: flex 和 flex-wrap: nowrap

如何让链接无缝循环滚动？

关键不在“复制 DOM”，而在用 CSS 控制位移节奏和容器宽度。真实项目里，复制节点容易引发焦点丢失、SEO 重复、JS 事件绑定混乱等问题。

正确做法是：设容器宽度为子项总宽的 2 倍，动画位移从 0% 到 -50%，再回到 0%，视觉上就是无限循环。

VPS Bootstrap

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

下载

.friend-links {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
.friend-links a {
  display: inline-block;
  margin-right: 2rem;
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #495057;
  transition: all 0.2s;
}
.friend-links a:hover {
  background-color: #0d6efd;
  color: white;
}
@keyframes scroll-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.friend-links {
  animation: scroll-loop 30s linear infinite;
}
.friend-links:hover {
  animation-play-state: paused;
}

动画时长 30s 可按链接数量微调：链接越多，值越大，否则滚动太快看不清
必须加 white-space: nowrap，否则换行会破坏水平流式布局
margin-right: 2rem 是唯一间距控制点，不要混用 Bootstrap 的 me-3 等工具类，易冲突

怎么兼容 Bootstrap 5 的栅格与响应式？

直接把滚动容器塞进 .container 或 .row 会出问题：Bootstrap 的 max-width 和 padding 会让内容被截断或留白异常。

解决方式是脱离栅格约束，在滚动区域外用标准容器包裹，内部用自定义 class 控制宽度。

在 <div class="container"> 内放一个 <code><div class="friend-links-wrapper">，后者设 <code>width: 100vw 并 margin-left: calc(-50vw + 50%) 居中（绕过 container padding）
移动端建议停用动画：@media (max-width: 768px) { .friend-links { animation: none; } }，改用横向滚动条（overflow-x: auto）更可控
如果用了 Bootstrap 的 RTL 模式（dir="rtl"），动画方向要改为 translateX(50%)，且把 flex-direction: row-reverse

点击链接没反应？检查这三点

常见现象是鼠标悬停变色但点击无跳转，不是 JS 阻止了默认行为，而是 HTML 或 CSS 层面出了问题。

确认每个链接都有完整 href 属性，且不是 href="#" 或空值 —— 否则浏览器认为无效链接，不触发导航
检查是否误加了 pointer-events: none（比如在父容器上写了 .disabled 类，或某些 Bootstrap 主题 CSS 泄漏）
滚动容器若设置了 z-index: -1 或 position: relative 但未设 z-index，可能被其他元素遮挡 —— 加 z-index: 1 即可