The core method of implementing a dual-row navigation bar in Bootstrap is to combine structures and style adjustments. 1. Use nested containers to build a dual-line structure, use two independent .navbars or .containers to place the top and bottom navigation content respectively, the first line places secondary information such as language switching and contact information, and the second line is used as the main menu; 2. Use Flex layout to merge into a container, set d-flex flex-column through the outer div to achieve vertical stacking, and manage styles and widths uniformly; 3. Optimization details include controlling spacing, responsive hiding the first line content, style isolation, and color matching coordination. These steps allow for a clear structure and responsive and friendly dual-line navigation bar.

Implementing the Double Row Navbar in Bootstrap is actually not a feature that comes with the framework, but this effect can be achieved through some simple HTML structure and CSS style adjustments. The focus is on understanding the layout mechanism of Bootstrap and making rational use of its raster system or flex tools.

Building a double-row structure using nested containers

A common practice is to use two separate .navbar or .container to place navigation content at the top and bottom respectively.

 <div class="top-nav">
  <div class="container">
    <!-- The content of the first line, such as language selection, contact information, etc.->
    <div class="d-flex justify-content-between">
      <span>Chinese/ English</span>
      <span>Contact Us</span>
    </div>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

• The first line can put secondary information, such as language switching, login link, etc.
• The second line is the standard Bootstrap navigation bar for the main menu.
• This method is clear in structure and is convenient for responsive processing.

Merge into a container using Flex layout

If you want dual-line navigation to be managed in a parent container, you can wrap two lines of content with a custom flex container:

 <div class="double-navbar d-flex flex-column">
  <div class="top-bar bg-light py-2">
    <div class="container d-flex justify-content-between">
      <span>Welcome to our website</span>
      <span>Login|Register</span>
    </div>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    ...
  </nav>
</div>

• Setting the outer layer d-flex flex-column allows two parts to stack vertically.
• The width or background color can be set uniformly, making it more visually more overall.
• Pay attention to whether the folding logic affects the content of the first line when adapting to the mobile terminal.

Small details optimization suggestions

• Spacing control : It is best to add a little margin or padding between the two lines to avoid visual crowding.

• Responsively hide the first line : On the small screen, you can consider hiding the secondary information on the top line:

  

   <div class="top-bar d-none d-md-block">

• Style isolation : Try not to share too many styles for the two navigation bars to avoid interference with each other.

• Color matching : The color differences between the upper and lower lines should not be too obvious, and maintain overall coordination.

---

Basically these are the methods. Although Bootstrap does not directly support a dual-line navigation bar, it can be easily achieved by combining existing components with a little CSS tweak. The key is to clarify the structural level and pay attention to the experience issues in responsive design.

The above is the detailed content of How to create a double row navbar in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!