如何在Bootstrap 5粘性导航下方挂载悬浮div（.chat-tag）

API 探路者

2026-8-20

问题

在Bootstrap 5中已实现功能正常的粘性导航，需在导航下方挂载.chat-tag悬浮div作为聊天入口，要求该悬浮块随页面滚动始终附着在粘性导航上。目前该元素在992px及以下宽度显示正常，但桌面端会与顶部导航处于同一行。

以下是原实现代码：

原CSS代码

nav {
  background-color: red;
  height: 48px;
  position: sticky;
  top: 0;
}

.main-nav {
  display: -webkit-flex;
  display: inline-flex;
  -webkit-justify-content: center;
}

.masthead-fluid {
  background-color: #F7CAC9;
}

.masthead {
  height: 60vh;
  display: inline-flex;
  align-items: center;
}

.chat-tag {
  background-color: #B565A7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 200px;
}

原HTML代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
  <div class="container-fluid">
    <div class="nav-wrapper text-center">
      <nav class="main-nav navbar navbar-expand-lg bg-white">
        <div class="container-fluid text">
          <a class="navbar-brand" href="#">
            LOGO
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#what">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#registry">Page 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 5</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="chat-tag">Chat with us</div>
      </nav>
    </div>
  </div>
</header>

<div class="container-fluid masthead-fluid mb-5">
  <div class="row">
    <div class="col-12">
      <div class="color-overlay d-flex align-items-center">
        <div class="container">
          <div class="row">
            <div class="col-12 masthead">
              <h1>Hello, world!</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
        scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
        ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
        nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
        nulla facilisi nullam vehicula ipsum.</p>

      <p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
        arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
        habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>

      <p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
        lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
        pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
        eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>

      <p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
        lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
        morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>

      <p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
        morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
        mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>

解决方案

问题根源是.chat-tag被放在Bootstrap的navbar内部，而navbar在桌面端（lg及以上）为flex布局，导致聊天块与导航内容同行排列。需调整结构和样式，让聊天块独立于导航栏，同时保持与粘性导航同步悬浮。

修改后的代码

HTML结构调整

将.chat-tag从<nav>元素中移出，放到.nav-wrapper内与<nav>同级，避免受navbar的flex布局影响：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
  <div class="container-fluid">
    <div class="nav-wrapper text-center d-flex flex-column align-items-center">
      <nav class="main-nav navbar navbar-expand-lg bg-white w-100">
        <div class="container-fluid text">
          <a class="navbar-brand" href="#">
            LOGO
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#what">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#registry">Page 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Page 5</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="chat-tag mt-2 mt-lg-0">Chat with us</div>
    </div>
  </div>
</header>

<!-- 其余HTML内容保持不变 -->
<div class="container-fluid masthead-fluid mb-5">...</div>
<div class="container">...</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>

CSS样式调整

修改.main-nav和.chat-tag的样式，优化响应式布局：

nav {
  background-color: red;
  height: 48px;
}

.main-nav {
  display: flex;
  justify-content: center;
}

.masthead-fluid {
  background-color: #F7CAC9;
}

.masthead {
  height: 60vh;
  display: inline-flex;
  align-items: center;
}

.chat-tag {
  background-color: #B565A7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 200px;
}

/* 桌面端调整导航栏与聊天块的排列方式 */
@media (min-width: 992px) {
  .nav-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

关键修改说明

结构调整：将.chat-tag移至nav外部，保留在header.sticky-top容器内，确保其随导航同步粘性悬浮，同时脱离navbar的flex布局控制。
响应式布局：给.nav-wrapper添加d-flex flex-column align-items-center，移动端默认垂直排列导航与聊天块；通过媒体查询，桌面端改为横向排列，将聊天块置于导航右侧（可根据需求调整位置）。
样式简化：移除nav上重复的position: sticky，因为header已设置sticky-top，无需重复声明；调整.main-nav的flex属性，确保导航栏占满容器宽度。

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

如何在Bootstrap 5粘性导航下方挂载悬浮div（.chat-tag）

原CSS代码 #

原HTML代码 #

修改后的代码 #

HTML结构调整 #

CSS样式调整 #