2017-02-28 44 views
0

我使用Bootstrap創建了一個導航欄。我想在左邊和右邊有兩個圖像,中間有一個搜索欄。導航欄應該有兩個圖像的高度。搜索字段應該位於導航欄中心的水平和垂直位置。這是我當前的代碼:Navbar左右兩個圖像和中間的搜索字段

HTML:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <div class="navbar-header"> 
        <img src="../images/Image1.png" width="280" height="80" alt=""> 
       </div> 
      </div> 
      <div class="col-sm-4" style="text-align: center"> 
       <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> 
      <div class="col-sm-4"> 
       <ul class="nav navbar-nav navbar-right"> 
        <img src="../images/Image2.jpg" width="330" height="80" alt=""> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 

CSS:

.navbar-form{ 
    padding-top: 13px; 
} 

我能做到這一點更巧妙?特別是在中心水平和垂直定位搜索領域的東西?

+1

你可能使用引導4更好 - 它使用Flex和具有垂直和水平bootply對準 – Pete

+0

快速演示課 - couldn找不到適用於flex的垂直對齊類,但您的想法如下:http://www.bootply.com/VW55SeJYnJ – Pete

+0

您的搜索字段未居中的原因是因爲您正在使用col-sm-4類並且給你的img標籤width =「330px」 – MKAD

回答

1

這很容易做到,通過柔性盒

.navbar { 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
\t align-items: center; 
 
}
<div class="navbar"> 
 
    <div class="img"> 
 
    \t <img src="http://placehold.it/150x150" alt=""> 
 
    </div> 
 
    <div class="search"> 
 
    \t <input type="text"> 
 
    \t <input type="submit" value="Ok"> 
 
    </div> 
 
    <div class="img"> 
 
    \t <img src="http://placehold.it/150x150" alt=""> 
 
    </div> 
 
    </div>

+0

這個解決方案呢?此解決方案不適用於Bootstrap體系結構!這是不好的破解! – MKAD

+0

@MKAD我真的很期待你這個問題的決定 – grinmax