我想改變我的導航中的圖像到更大的尺寸。標誌不適合自舉導航欄
但是通過這樣做navbar get的格式不正確。
我的代碼在這裏:http://www.bootply.com/941lMP3fj6#
的問題可能是該圖像是在一個錨標記。但不確定。
我想改變我的導航中的圖像到更大的尺寸。標誌不適合自舉導航欄
但是通過這樣做navbar get的格式不正確。
我的代碼在這裏:http://www.bootply.com/941lMP3fj6#
的問題可能是該圖像是在一個錨標記。但不確定。
添加到您的風格:
.navbar-brand
{
margin: 0;
padding: 0;
{
.navbar-brand img
{
max-height: 100%;
}
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar navbar-collapse collapse navbar-responsive-collapse">
<div class="pull-left" style="margin-right: 15px;">
<a rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul> <!-- end nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="">NL</a></li>
<li><a href="">IL</a></li>
<li><a href="">ENG</a></li>
</ul>
</li>
</ul> <!-- end nav menu right -->
</div> <!-- end nav-collapse -->
</div>
把你的標誌中日e容器。
上面的代碼工作!
檢查並讓我知道你是否有任何問題!
您需要調整導航欄的高度。
您可以使用該變量在更短的調整高度,它會垂直居中導航欄,幷包括所有必要的填充:
@navbar-height
50像素是默認的。
如何在常規CSS調整,這是改變的.navbar
的min-height
和navbar-fixed-top
的高度,然後調整.navbar-nav
填充。
這是頂部部分應當如何構造(缺少的Navbar報頭):
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
例Bootply:http://www.bootply.com/tOoeM8o8Om
當鏈接解決方案摺疊後,下拉菜單顯示在圖像的頂部 – StevenP 2015-04-30 10:25:39
這是正確的。你有/有'padding:15px 15px;'。將其更改爲'padding:0 15px 15px 15px;'會在保留其他填充的同時取走頂部。 – 2014-09-05 13:07:53
是的,這就是看你的解決方案的點 – 2014-09-05 13:08:41
,現在看起來好像是一個醜陋的1px寄宿生,然後是20px的底部填充 - 是按照設計嗎? – StevenP 2015-04-30 10:23:56