帶三個元素的導航欄（左，中，右）：將左右元素移動到一行，中央元素移動到小？

Question

我正在用bootstrap創建一個導航欄。它有三個元素：左右兩個圖像和中心的搜索字段。這是我當前的代碼：

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <form class="navbar-form navbar" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Suche" name="suche"> 
       <div class="input-group-btn"> 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </div> 
      </div> 
     </form> 
     <div class="nav navbar-nav navbar-left"> 
      <a href="#"><img src="../images/ITPlattformLogo.png" alt="" height="80"></a> 
     </div> 
     <div class="nav navbar-nav navbar-right"> 
      <a href="http://www.hwr-berlin.de/home/" class="navbar-left"><img src="../images/HWRLogo.jpg" alt="" height="80"></a> 
     </div> 
    </div> 
</nav> 

CSS：

.navbar-form 
{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    padding-top: 14px; 
} 

對於較小的屏幕尺寸，我想有一個排的兩個圖像和搜索領域的在全屏幕寬度下面的第二行。我怎樣才能做到這一點？

Answer 1

一種方式將是使用媒體查詢來調整元件的位置..

// when navbar is horizontal 
@media (min-width: 768px) { 
    .navbar-form 
    { 
     position: absolute; 
     width: 100%; 
     left: 0; 
     text-align: center; 
     padding-top: 14px; 
    } 
} 

// when navbar is vertical 
@media (max-width: 768px) { 
    .nav.navbar-nav { 
     float:left; 
     width: 50%; 
     text-align:center; 
    } 
    .nav.navbar-nav a { 
     margin: 0 auto; 
    } 
} 

http://www.codeply.com/go/t83k8AkHkL

另一種方法是使用自舉其使用Flexbox的，並alignment of Navbar components easier than 3.x。

<nav class="navbar navbar-toggleable navbar-light bg-faded"> 
    <ul class="navbar-nav mx-auto flex-shrink"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#"><img src="//placehold.it/130x80" alt="one" height="80"></a> 
     </li> 
    </ul> 
    <ul class="navbar-nav mx-auto flex-unordered flex-sm-last"> 
     <li class="nav-item "> 
      <a class="nav-link" href="#"><img src="//placehold.it/130x80" alt="two" height="80"></a> 
     </li> 
    </ul> 
    <form class="mx-2 my-auto d-flex w-100 flex-last flex-sm-unordered"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      <span class="input-group-btn"> 
       <button class="btn btn-outline-secondary" type="button">GO</button> 
       </span> 
     </div> 
    </form> 
</nav> 

http://www.bootply.com/E6gfMKzhl4