Bootstrap4窗口缩放后导航栏元素位置控制方案咨询

Hey there! Let's tackle your navbar layout needs step by step. I'll cover both keeping your cart and login elements anchored in place, and transforming the search bar into a full-screen dropdown on smaller screens.

1. Keep Cart & LogIn Elements Fixed in Position #

Bootstrap 4's navbar uses flexbox, so we can leverage flex utility classes to ensure these elements stay on the right side no matter how the screen scales. The key trick is placing them outside the collapsible navbar-collapse container so they never get folded into the hamburger menu.

Example Code: #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Brand Logo -->
  <a class="navbar-brand" href="#">Your Brand</a>

  <!-- Collapsible Main Navigation -->
  <div class="collapse navbar-collapse" id="mainNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
      </li>
    </ul>
  </div>

  <!-- Fixed Cart & Login (Always Visible on Right) -->
  <div class="d-flex align-items-center">
    <a href="#" class="nav-link mr-3">Cart</a>
    <a href="#" class="nav-link">LogIn</a>
  </div>
</nav>

How It Works: #

• d-flex align-items-center: Turns the cart/login container into a flex box and vertically centers its contents to match the navbar's height.
• Placing this container outside navbar-collapse ensures it never gets hidden behind the hamburger menu when the screen shrinks.
• The navbar's flex layout automatically pushes this container to the right, since the collapsible section takes up all available remaining space.

2. Transform Search Bar to Full-Screen Dropdown on Small Screens #

We'll combine Bootstrap's dropdown component with custom CSS to pull off this effect. The plan is:

• Show a regular inline search bar on large screens
• Replace it with a dropdown button on small screens; clicking the button opens a full-screen search field

Step 1: HTML Structure #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Brand</a>

  <!-- Large Screen Search Bar (Hidden on Small Screens) -->
  <div class="d-none d-lg-block mr-3">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search products...">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Search</button>
      </div>
    </div>
  </div>

  <!-- Small Screen Search Dropdown (Hidden on Large Screens) -->
  <div class="dropdown d-lg-none mr-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="searchDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Search
    </button>
    <div class="dropdown-menu dropdown-fullscreen" aria-labelledby="searchDropdown">
      <div class="container-fluid p-0">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search products...">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Search</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Navigation (Collapsible) -->
  <div class="collapse navbar-collapse" id="mainNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
      </li>
    </ul>
  </div>

  <!-- Fixed Cart & Login -->
  <div class="d-flex align-items-center">
    <a href="#" class="nav-link mr-3">Cart</a>
    <a href="#" class="nav-link">LogIn</a>
  </div>
</nav>

Step 2: Custom CSS for Full-Screen Dropdown #

Add this CSS to your stylesheet to make the dropdown menu cover the entire screen:

.dropdown-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  margin: 0;
  border-radius: 0;
  padding: 1.5rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.dropdown-fullscreen .input-group {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

Key Details: #

• d-none d-lg-block: Hides the regular search bar on screens smaller than lg (992px), shows it on larger screens.
• d-lg-none: Hides the dropdown button on large screens, shows it on smaller ones.
• position: fixed in the CSS makes the dropdown menu cover the entire viewport, while max-width on the input group keeps it centered and readable on wide screens.
• Don't forget to include Bootstrap 4's required dependencies (jQuery, Popper.js, Bootstrap JS) for dropdowns to function properly.

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