我使用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;
}
我能做到這一點更巧妙?特別是在中心水平和垂直定位搜索領域的東西?
你可能使用引導4更好 - 它使用Flex和具有垂直和水平bootply對準 – Pete
快速演示課 - couldn找不到適用於flex的垂直對齊類,但您的想法如下:http://www.bootply.com/VW55SeJYnJ – Pete
您的搜索字段未居中的原因是因爲您正在使用col-sm-4類並且給你的img標籤width =「330px」 – MKAD