Bootstrap导航栏搜索框居右配置及自适应折叠异常问题求助

Hey there! Let's work through your Bootstrap navbar problems step by step. You've got two key goals: getting the search box to stay aligned to the right, and fixing that annoying issue where it drops down instead of collapsing into the hamburger menu on smaller screens. Here's how to sort it out:

Problem Breakdown #

First, let's look at what's causing the issues in your current code:

• The search box is nested inside a li within a navbar-right list, which adds unnecessary structure that messes with alignment.
• The extra float:right style on the form is redundant (and can conflict with Bootstrap's default layout rules).
• Keeping the search box inside the collapse container means it should fold into the hamburger menu, but the nested structure is making it misbehave and drop down instead.

Solution Code #

Here's the revised code that fixes both problems, with comments explaining the key changes:

<div class="row">
  <!-- Navbar with affix scroll effect -->
  <nav class="navbar navbar-default" data-spy="affix" data-offset-top="150">
    <div class="container-fluid">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Home</a>
        </div>

        <!-- Move search box outside collapse to keep it visible on small screens -->
        <form class="navbar-form navbar-right" role="search">
          <div class="input-group add-on">
            <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </div>
        </form>

        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#">Technology</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Science</a></li>
            <li><a href="#">Entertainment</a></li>
            <li><a href="#">Science</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Life</a></li>
                <li><a href="#">Tours and Travels</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</div>

Key Changes Explained #

1. Fixing Right Alignment

   • Removed the unnecessary ul.nav.navbar-nav and li wrapping the search form. Bootstrap's navbar-right class on the form itself is all you need to keep it aligned to the right.
   • Got rid of the redundant style="float:right" on the form—Bootstrap's built-in classes handle this cleanly.

2. Fixing Responsive Drop-Down Issue

   • Moved the search form outside the collapse navbar-collapse container. This keeps it visible next to the hamburger menu on small screens instead of getting trapped in the collapsed menu (or misbehaving and dropping down).
   • For extra polish on tiny screens (under 480px), add this custom CSS to make the search input take full width:

     @media (max-width: 480px) {
       .navbar-form .input-group {
         width: 100%;
       }
     }
     

This setup will keep your search box reliably aligned right, and it'll play nice with the responsive hamburger menu without dropping down unexpectedly.

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