CSS Bootstrap navbar - Zentrum Suchleiste, die die gesamte Breite bei Kollaps

Question

Ich habe eine Bootstrap v.3 Navbar mit 3 Elementen drin. Ich möchte Elemente gleichmäßig ausrichten, so dass die Suchleiste in der Navigationsleiste zentriert ist. Und wenn es zusammenbricht, dauert es die volle Breite. Aber darum zu kämpfen.

Dies ist der HTML-Code für sie:

 <nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 

     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="col-lg-4 navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <img src="assets/img/logo.png" alt="logo"> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <form class="navbar-form navbar-left navbar-search-form active" role="search"> 
       <div class="form-group"> 
        <input type="text" value="" class="form-control" placeholder="Search..."> 
       </div> 
      </form> 
        <ul class="nav navbar-nav"> 
       <li class="active"> 
        <a href="javascript:void(0);"><i class="fa fa-search"></i></a> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li> 
      </ul> 

      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
     </nav> 

Ich versuchte, ein fiddle dafür zu machen, aber es hat nicht gut ausfallen, aber hoffentlich der Code kann es eine Idee geben.

Answer 1

Sie das gleiche mit ein paar einfache Kniffe ohne flex und CSS3-Eigenschaften erreichen können.

prüfen Demo HERE

Versuchen Sie, diese

HTML:

<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 

    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

     <img class="logo" src="//placehold.it/50x50" alt="logo"> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <form class="navbar-form navbar-search-form active" role="search"> 
     <div class="form-group"> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search for..."> 
      <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> 
     </span> 
      </div> 
     </div> 
     </form> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li> 
     </ul> 

    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

CSS:

body { 
    background-color: #ddd; 
} 

.navbar { 
    border: 1px solid #ccc; 
} 

.navbar-toggle .icon-bar { 
    background-color: #333; 
} 

.navbar-nav > li { 
    line-height: 50px; 
    position: relative; 
} 

.logo, .navbar-nav > li > .btn { 
    margin: 0 15px; 
} 

@media (min-width: 767px) { 
    .navbar-search-form { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100%; 
    float: none; 
    text-align: center; 
    padding: 8px 0; 
    } 
} 

Answer 2

Die Klasse "text-center" in Bootstrap 3 wurde erstellt, um das untergeordnete Element an der Mitte auszurichten.

Answer 3

einfachste Weg ist flex zu verwenden, aber es schlechte Browser-Kompatibilität hat, so dass Sie media queries und position:absolute; für .navbar-form verwenden können.

Geben Sie position-relative an die div .container nur innerhalb der nav. Ich habe ihm eine Grenze gegeben, damit Sie die Zentrierung sehen können. Ihre sign in Schaltfläche bleibt an der oberen rechten Ecke, weil Sie es navbar-right Klasse angegeben haben.

.navbar-header img{ 
 
    width:70px; 
 
    margin:0; 
 
} 
 
.navbar-container{ 
 
    position:relative; 
 
    border:1px solid red; 
 
} 
 
.navbar-header button span{ 
 
    color:black; 
 
    background-color:green; 
 
} 
 
@media screen and (min-width:768px){ 
 
    form.navbar-form{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    margin:0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 
 
    <div class="container navbar-container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="logo"> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <form class="navbar-form navbar-search-form active" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" value="" class="form-control" placeholder="Search..."> 
 
      <a href="javascript:void(0);"><i class="fa fa-search"></i></a> 
 
     </div> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>