Fixed Search Box in Bootstrap Navbar

Question

Ich versuche herauszufinden, wie Sie das Suchfeld in der Navigationsleiste fest, anstatt Teil des Dropdown-Menüs. Die endgültige Ausgabe würde etwas dem folgenden Bild entsprechen.

<div class="container-fluid"> 
    <!-- add header --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

    </div> 

    <!-- add menu --> 
    <div class="collapse navbar-collapse" id="navbar1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="/">Home</a></li> 
      <li><a href="/about.html">About</a></li> 
      <li><a href="/services.html">Services</a></li> 
     </ul> 

     <!-- add search form --> 
     <form class="navbar-form navbar-right" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search this site"> 
       <span class="input-group-btn"> 
        <button type="submit" class="btn btn-default"> 
        <span class="glyphicon glyphicon-search"></span> 
        </button> 
       </span> 
      </div> 
     </form> 
    </div> 
</div> 

Hier ist der Code, den ich gerade arbeite: http://www.bootply.com/fb311f2zSJ#

Answer 1

Try this:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
/* CSS used here will be applied after bootstrap.css */ 
 
.navbar-header form { 
 
    position: absolute; 
 
    right: 20px; 
 
    max-width: 250px; 
 
} 
 
button.navbar-toggle.pull-left { 
 
    margin-left: 15px; 
 
} 
 
@media only screen and (max-width:768px){ 
 
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { 
 
     border-color: rgba(0,0,0,0); 
 
     margin-top: 0; 
 
     padding-top: 8px; 
 
    } 
 
    .navbar-form { 
 
     padding: 10px 15px; 
 
     margin-top: 8px; 
 
     margin-right: -15px; 
 
     margin-bottom: 8px; 
 
     margin-left: -15px; 
 
     border-top: 0px solid transparent; 
 
     border-bottom: 0px solid transparent; 
 
     -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1); 
 
     box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0px 0 rgba(255,255,255,.1); 
 
    } 
 
}

<nav class="navbar navbar-inverse" role="navigation"> 
 

 
    <div class="container-fluid"> 
 
     <!-- add header --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <!-- add search form --> 
 
      <form class="navbar-form navbar-right" role="search"> 
 
       <div class="input-group"> 
 
        <input type="text" class="form-control" placeholder="Search this site"> 
 
        <span class="input-group-btn"> 
 
         <button type="submit" class="btn btn-default"> 
 
          <span class="glyphicon glyphicon-search"></span> 
 
         </button> 
 
        </span> 
 
       </div> 
 
      </form> 
 
     </div> 
 

 
     <!-- add menu --> 
 
     <div class="collapse navbar-collapse" id="navbar1"> 
 
      <ul class="nav navbar-nav" style="width:100%"> 
 
       <li class="active"><a href="/">Home</a></li> 
 
       <li><a href="/about.html">About</a></li> 
 
       <li><a href="/services.html">Services</a></li>  
 
      </ul>  
 
     </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Sie müssen ein weiteres Suchformular hinzufügen, das auf mobilen Geräten sichtbar wird. Sie können es mit Ihrem CSS stylen, um die Suchleiste richtig zu positionieren. Hier

ist die aktualisierte html:

<div class="container-fluid"> 
    <!-- add header --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

     <!-- add the mobile devices search form here --> 
    <div class="col-xs-10 visible-xs"> 
     <form class="navbar-form navbar-right mobile-search" role="search"> 
     <div class="input-group"> 
      <input class="form-control" placeholder="Search this site" type="text"> 
      <span class="input-group-btn"> 
      <button type="submit" class="btn btn-default"> 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
      </span> 
     </div> 
     </form> 
    </div> 
    <!-- end of the mobile devices search form section --> 

    </div> 

    <!-- add menu --> 
    <div class="collapse navbar-collapse" id="navbar1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="/">Home</a></li> 
      <li><a href="/about.html">About</a></li> 
      <li><a href="/services.html">Services</a></li> 
     </ul> 

     <!-- add search form --> 
     <form class="navbar-form navbar-right hidden-xs" role="search"> 
      <div class="input-group"> 
       <input class="form-control" placeholder="Search this site" type="text"> 
       <span class="input-group-btn"> 
        <button type="submit" class="btn btn-default"> 
        <span class="glyphicon glyphicon-search"></span> 
        </button> 
       </span> 
      </div> 
     </form> 
    </div> 
</div> 

Answer 3

Ich habe einige Änderungen in Standard-CSS-Datei erfolgen kann dies wird Ihnen helfen.

<nav class="navbar navbar-inverse" role="navigation"> 

    <div class="container-fluid"> 
     <!-- add header --> 
     <div class="navbar-header pull-left"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 


     </div> 

     <!-- add menu --> 
     <div class="collapse navbar-collapse" id="navbar1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="/about.html">About</a></li> 
       <li><a href="/services.html">Services</a></li> 
      </ul> 
      <!-- add search form --> 


     </div> 
     <form class="navbar-form navbar-right pull-right" role="search"> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search this site"> 
      <span class="input-group-btn"> 
       <button type="submit" class="btn btn-default"> 
       <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
      </div> 
     </form> 

    </div> 
</nav> 

CSS:

@media (min-width:768px){ 
    .navbar-collapse{ 
    float:left 
    } 
} 

@media (max-width:767px){ 
    .navbar-form.navbar-right{ 
     border-color: #101010; 
     width: calc(100% - 30px); 
     padding: 0; 
     border: none; 
    } 
    .navbar{ 
    border:none; 
    } 
    .navbar-collapse{ 
    background-color: #222; 
    position: absolute; 
    top: 50px; 
    width: 100%; 
    left:0; 
    margin:0 !important; 
    } 
} 

Hier arbeitet Demo: https://jsfiddle.net/vb8ptav5/