Bootstrap 4 两行Navbar开发需求及适配问题咨询

Here's a solution that checks all your boxes, fixes the border issue you ran into, and replaces the old Bootstrap 3 affix with modern, Bootstrap 4-compatible positioning:

Custom CSS #

Add these styles to handle the mobile fixed top navbar and desktop sticky bottom navbar:

/* Fix top navbar to viewport on mobile */
@media (max-width: 767px) {
  .fixed-top-sm {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
  /* Prevent content from being hidden under the fixed navbar */
  body {
    padding-top: 56px;
  }
}

/* Make bottom navbar stick to top on desktop when scrolling */
@media (min-width: 768px) {
  .sticky-top-desktop {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
}

HTML Structure #

This clean, proper Bootstrap 4 structure eliminates the border issue and implements your desired layout:

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- Top Navbar: Title + Toggle Button -->
<nav class="navbar navbar-light bg-light fixed-top-sm">
  <div class="container">
    <a class="navbar-brand" href="#">ONE_________BIG_________TITLE</a>
    <!-- Toggle button only visible on mobile -->
    <button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarLinks">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

<!-- Bottom Navbar: Collapsible Navigation Links -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top-desktop">
  <div class="container">
    <!-- Collapsible content - expanded on desktop, collapsed on mobile -->
    <div class="collapse navbar-collapse" id="navbarLinks">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item 1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>
      </ul>
      <!-- Add your forms/icons here -->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!-- Bootstrap 4 JS Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

Key Details #

• Top Navbar: Remains fully visible on all screen sizes. The toggle button is hidden on desktop using d-md-none, and stays fixed to the top on mobile.
• Bottom Navbar: Expanded by default on desktop (thanks to navbar-expand-md) and collapses on mobile. On desktop, it sticks to the top of the viewport once you scroll past it.
• Border Fix: By using Bootstrap's native navbar-collapse component within the bottom navbar (instead of a nested div), we eliminate the unwanted gray border issue you encountered.
• Responsive Flow:
  • Mobile: Top navbar stays fixed, bottom navbar collapses into a toggleable menu.
  • Desktop: Top navbar stays at the top initially, bottom navbar sticks to the top as you scroll.

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