如何用Bootstrap及Material Design Bootstrap实现标签栏置于navbar-brand下方的导航？

Absolutely! You can totally position tabbed navigation directly beneath the navbar-brand using Bootstrap and Material Design Bootstrap (MDB). This is a common, clean pattern for sites that want to keep branding front-and-center while tying tabbed content to the top navigation. Here's how to pull it off smoothly:

Step-by-Step Implementation #

1. Structure the Navbar Container: Nest both the brand and tab navigation within the core Bootstrap navbar wrapper. Use utility classes to force the brand to take full width, ensuring tabs sit directly below it.
2. Leverage MDB Tab Components: Use MDB's enhanced tab controls for out-of-the-box Material Design styling and smooth tab-switching functionality.

Working Code Example #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- Navbar Brand (full width to push tabs below) -->
    <a class="navbar-brand d-block w-100 text-center mb-2" href="#">My Awesome Brand</a>
    
    <!-- Tabbed Navigation -->
    <ul class="nav nav-tabs justify-content-center w-100" id="mainTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="dashboard-tab" data-mdb-toggle="tab" data-mdb-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="projects-tab" data-mdb-toggle="tab" data-mdb-target="#projects" type="button" role="tab" aria-controls="projects" aria-selected="false">Projects</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="settings-tab" data-mdb-toggle="tab" data-mdb-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
      </li>
    </ul>
  </div>
</nav>

<!-- Corresponding Tab Content -->
<div class="container mt-4">
  <div class="tab-content" id="mainTabsContent">
    <div class="tab-pane fade show active" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
      Welcome to your dashboard! This is your main hub for quick updates and overviews.
    </div>
    <div class="tab-pane fade" id="projects" role="tabpanel" aria-labelledby="projects-tab">
      Browse, edit, and track all your active projects in one place.
    </div>
    <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
      Customize your account preferences, notification settings, and more.
    </div>
  </div>
</div>

Key Customization Tips #

• Alignment: Swap justify-content-center on the nav-tabs for justify-content-start to left-align tabs, or justify-content-end to right-align them.
• Spacing: Adjust the mb-2 class on the navbar-brand to tweak the gap between the brand and tabs (e.g., mb-1 for tighter spacing, mb-3 for more breathing room).
• Styling: Remove the default tab border with border-bottom: none; in custom CSS for a cleaner look, or use MDB's built-in color classes to match your brand's palette.

This setup plays nicely with MDB's Material Design styling and maintains Bootstrap's responsive behavior—on mobile, the navbar will still collapse if you use the expand classes, though you can adjust the breakpoint via custom CSS if needed.

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