我想改变我的导航中的图像到更大的尺寸。标志不适合自举导航栏
但是通过这样做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