3つの要素を持つナビゲーションバー（左、中央、右）：左右の要素を1つの行に移動し、中央の要素を小さく移動しますか？

Question

私はブートストラップを備えたnavbarを作成しています。それは3つの要素を持っています：左右に2つのイメージと中央に検索フィールド。これは私の現在のコードです：

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; 
} 

、私はに一列に二つの画像と検索フィールドを持っていたいと思います下の2行目は全画面幅で表示されます。どうやってやるの？

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

別のアプローチは、フレキシボックス、及びalignment of Navbar components easier than 3.xを使用ブートストラップ4を使用することです。

<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