如何实现Bootstrap侧边导航栏在小屏幕时切换为顶部导航？

阿华AIGC实验室

2026-5-13

Hey there! I’ve tackled this exact scenario before, and it’s totally achievable using Bootstrap’s built-in utilities plus a small chunk of custom CSS. No fancy JavaScript required (unless you want the mobile toggle functionality, which we’ll cover too). Here’s how to make it work:

Core Idea

We’ll leverage Bootstrap’s responsive breakpoints and flex system to adjust the navbar’s layout:

Desktop screens (≥992px, Bootstrap’s lg breakpoint): Navbar stays fixed on the left with a set width, and main content occupies the remaining space.
Mobile/tablet screens (<992px): Navbar switches to a full-width top bar, with content sitting below it.

Full Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Left-to-Top Navbar Demo</title>
    <!-- Include Bootstrap CSS (use your preferred CDN or local file) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Desktop: Fixed left navbar */
        @media (min-width: 992px) {
            .sidebar-nav {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 240px;
                overflow-y: auto;
            }
            .main-content {
                margin-left: 240px;
                min-height: 100vh;
            }
            /* Stack nav items vertically on desktop */
            .navbar-nav {
                flex-direction: column;
                width: 100%;
                padding: 1rem 0;
            }
            .nav-item {
                padding: 0.5rem 1rem;
            }
        }

        /* Mobile: Full-width top navbar */
        @media (max-width: 991px) {
            .sidebar-nav {
                position: relative;
                height: auto;
                width: 100%;
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar: Left on desktop, top on mobile -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sidebar-nav">
        <div class="container-fluid">
            <a class="navbar-brand ms-3" href="#">My Project</a>
            <!-- Optional mobile toggle button (requires Bootstrap JS) -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLinks">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarLinks">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Settings</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Help</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main content area -->
    <main class="main-content p-4">
        <h1>Welcome to Your Dashboard</h1>
        <p>Resize your browser to see the navbar switch from left to top!</p>
        <p>On desktop, the navbar stays fixed on the side while you scroll. On mobile, it collapses into a top bar with a toggle menu.</p>
    </main>

    <!-- Optional: Bootstrap JS for mobile toggle functionality -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Key Breakdown

Desktop Layout:
- The @media (min-width: 992px) query targets large screens. We set the navbar to position: fixed with full viewport height and a fixed width.
- The main content gets a margin-left matching the navbar width to prevent overlap.
- We override Bootstrap’s default horizontal navbar-nav to stack links vertically with flex-direction: column.
Mobile Layout:
- For smaller screens, the navbar reverts to a relative position with full width, and the main content loses its left margin.
- The optional navbar-toggler button lets users expand/collapse the menu on mobile (requires Bootstrap’s JS bundle).
Customization:
- Adjust the 240px width in the CSS to make the left navbar wider/narrower.
- Swap bg-primary with any Bootstrap background class (like bg-dark or bg-light) for different colors.
- Remove the collapse wrapper and navbar-toggler if you don’t need a collapsible mobile menu.