bootstrap 推特导航栏中的徽标重叠
Logo overlap in bootstrap twitter navbar
我想让我的徽标与我的导航栏重叠,但我不知道该怎么做。我试图增加图片的大小,但没有成功,导航栏只是放大了。我也希望它在相同的 div class 中,否则它在网站的移动版本上不会很好。我将添加它的外观和我想要的图片以及代码。提前致谢
代码:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand">
<a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a>
</div>
只需将徽标放在导航栏之外 div。并对齐 top:0px left:0px.
或者,如果您希望徽标始终位于左侧,则只需将其向左浮动即可。
为您的徽标设置 "logo" 的 class,然后添加:
.logo {
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
同时修复您的导航栏。
希望对您有所帮助!
我想让我的徽标与我的导航栏重叠,但我不知道该怎么做。我试图增加图片的大小,但没有成功,导航栏只是放大了。我也希望它在相同的 div class 中,否则它在网站的移动版本上不会很好。我将添加它的外观和我想要的图片以及代码。提前致谢
代码:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand">
<a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a>
</div>
只需将徽标放在导航栏之外 div。并对齐 top:0px left:0px.
或者,如果您希望徽标始终位于左侧,则只需将其向左浮动即可。
为您的徽标设置 "logo" 的 class,然后添加:
.logo {
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
同时修复您的导航栏。
希望对您有所帮助!