Bootstrap 3响应式菜单配置及导航栏间距调整技术咨询

Hey there! Congrats on building your first Bootstrap site—let's get your navbar sorted out with those three requests you have. I'll break everything down clearly so you understand each part.

Your existing code is missing core Bootstrap navbar structure classes, which is why the responsive menu isn't working. Bootstrap 3's responsive navbar needs a few key components: an outer navbar container, a mobile toggle button (the hamburger menu), and proper collapse classes. Here's the full modified code:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Logo & Mobile Toggle Button -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".js-navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.php">
        <div class="logo">
          <img src="image/logo.png"/><br/>
          Welcome To Lotus Groups
        </div><!--endoflogo-->
      </a>
    </div>

    <!-- Collapsible Menu Content -->
    <div class="collapse navbar-collapse js-navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Lotus Construction</a></li>
        <li><a href="#">Lotus Interior</a></li>
        <li><a href="#">Lotus Digital</a></li>
        <li><a href="#">Lotus Property</a></li>
        <li><a href="#">Lotus Site</a></li>
      </ul>
    </div><!--collapse navbar-collapse js-navbar-collapse-->
  </div><!--endofcontainer-fluid-->
</nav>

For matching the left spacing from your reference site, here are two solid options:

• Option 1: Custom Padding (Simple & Flexible)
  Bootstrap 3 doesn't have built-in spacing utility classes (those arrived in Bootstrap 4+), so adding custom padding-left is totally acceptable. You can target either your .logo class or the .navbar-brand directly in your CSS:

  .logo {
    padding-left: 25px; /* Tweak this value to match your reference site */
  }
  /* Alternatively, adjust the navbar-brand container */
  .navbar-brand {
    padding-left: 30px;
  }
  

• Option 2: Bootstrap Grid Classes (Native Layout)
  If you prefer using Bootstrap's built-in layout tools, wrap the logo and menu in grid columns. This adds automatic padding that you can refine if needed:

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <a class="navbar-brand" href="index.php">
          <div class="logo">...</div>
        </a>
      </div>
      <div class="col-md-10">
        <div class="collapse navbar-collapse js-navbar-collapse">...</div>
      </div>
    </div>
  </div>
  

Recommendation: Go with custom padding for simplicity—it's easier to fine-tune exactly to your reference site without overcomplicating the layout.

Let's break down each key class so you understand their roles:

• .navbar: The base container for the entire navigation bar, applying core styling like background, padding, and positioning.
• .navbar-default: A predefined theme class that gives the navbar a light gray background and default link styles (swap with .navbar-inverse for a dark theme).
• .container-fluid: Makes the navbar span the full width of the screen, instead of being constrained to a fixed-width container.
• .navbar-header: Groups the logo and mobile toggle button together, ensuring they stay aligned correctly on small screens.
• .navbar-toggle: Styles the mobile hamburger button, which triggers the menu collapse/expand on small devices.
• data-toggle="collapse" & data-target=".js-navbar-collapse": Bootstrap's data attributes that tell JavaScript to toggle visibility of the element with class .js-navbar-collapse when the button is clicked.
• .sr-only: Hides the "Toggle navigation" text visually but keeps it accessible for screen readers.
• .icon-bar: Creates each horizontal line in the hamburger menu—three of these make the classic menu icon.
• .collapse: Hides the menu by default on small screens; Bootstrap JS toggles this class to show/hide the menu.
• .navbar-collapse: Combines with .collapse to style the collapsible menu container, ensuring it fits properly within the navbar.
• .nav: Base class for navigation lists, removing default list styling (bullets, padding).
• .navbar-nav: Specializes the .nav class for navbar use—adds vertical spacing, hover effects, and responsive alignment.

That should cover all your questions! Feel free to tweak values to get the exact look you want.

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