1
我正在製作一個包含5個元素的導航欄:4個文本鏈接和1個徽標鏈接。 所有5個元素都居中並需要一個邊距。 當窗口變小時,邊距必須變小。如何在我的導航欄中添加元素
我想要實現的網格系統,但我似乎並沒有得到它的工作..
這裏的的jsfiddle:http://jsfiddle.net/bg9ubxq1/1/
HTML:
<nav id="menuTemp" class="navbar navbar-static-top text-center" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<img src="content/images/logos/logo_mini.png" alt="logo" class="animated visible-xs visible-sm" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav custom-navbar">
<li><a href="#">Diensten</a></li>
<li><a href="#">Technologieën</a></li>
<li class="visible-md visible-lg">
<img src="content/images/logos/logo_mini.png" alt="logo" class="animated center-block" />
</li>
<li><a href="#">Vacatures</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-static-top .navbar-toggle .icon-bar {
background-color: #888;
}
@media (min-width:768px) {
.custom-navbar {
margin: 5px auto;
display: table;
table-layout: fixed;
float: none;
height: 51px;
}
}
#menuTemp {
box-shadow: 0px 5px 10px #ddd;
z-index: 1000;
height: 58px;
}
.nav {
margin-top: 3px;
}
.nav > li {
/*margin: 0 60px;*/
margin: 0 20px;
}
.nav > li > a:hover {
background-color: #F5F7FA;
}
.nav > li > a:focus {
background-color: white;
outline: none;
}
.navbar-nav > li > img {
position: relative;
bottom: 1px;
}
提供一個的jsfiddle請等詳細信息參見。 ** navbar-header **和** navbar-collapse **有什麼區別? – 2014-10-29 12:26:57
在原始帖子中添加了JSFiddle。當窗口大小爲移動大小時,導航欄摺疊是必須摺疊的內容。 – 2014-10-29 12:35:29
僅供參考:您的'#menuTemp'需要具有自動移動高度,否則內容不會在導航欄內摺疊。 – Aibrean 2014-10-29 14:06:44