Bootstrap技术问题：如何将折扣Div横幅固定在上方Navbar上？

先修正你代码里的语法错误（比如未闭合的<span>标签），再通过Bootstrap的内置类实现紧密贴合的效果：

<!-- Bootstrap Navbar组件，添加mb-0移除默认下边距 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-0">
  <!-- Navbar内容示例，可替换为你的实际导航内容 -->
  <a class="navbar-brand" href="#">品牌名称</a>
</nav>

<!-- 折扣横幅，添加mt-0移除默认上边距，搭配样式类优化展示 -->
<div class="bg-warning text-center py-2 mt-0">
    <span>全品5折（50% off of our products）</span>
</div>

核心实现要点： #

• 给Navbar加mb-0类：消除Bootstrap Navbar自带的底部外边距，避免和下方横幅产生空隙
• 给折扣Div加mt-0类：移除Div默认的顶部外边距，确保和Navbar底部完全贴合
• 额外的py-2（上下内边距）、text-center（文字居中）、bg-warning（背景色）都是Bootstrap内置样式，可根据需求替换为其他类（比如bg-primary换蓝色背景）

如果你的Navbar是固定在页面顶部的（带fixed-top类），需要同步调整横幅的定位避免重叠：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mb-4">
  <a class="navbar-brand" href="#">品牌名称</a>
</nav>

<div class="bg-warning text-center py-2 fixed-top mt-5">
    <span>全品5折（50% off of our products）</span>
</div>

这里的mt-5数值可根据Navbar的实际高度微调，保证横幅刚好卡在Navbar正下方。

内容的提问来源于stack exchange，提问作者Random Person