[英]Bootstrap 3 navigation bar logo placement in center
徽标合拢时,我将徽标放到中间,并且也可以通过打开更宽的屏幕来做到这一点,目前代码看起来像这样,徽标出现在不需要的左侧,
标头的CSS,
header
{
background-image: url("../images/header.png");
background-repeat: repeat-x;
width: 100%;
height: 150px;
}
<header>
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="javascript:void;"><img id="logo" src="images/logo.png"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
</ul>
</div>
</div>
</div>
</header>
在<li>
放置徽标时,它会显示在较宽屏幕的中央,但会出现在小屏幕的折叠列表中。 目前看起来像这样
我不确定所有内容,但我将从复制徽标开始。
第一个徽标:
这是针对小型设备的,放置在您的.navbar-toggle
元素中。
您需要添加一些CSS行以使其居中。
第二个徽标:
这是针对较大的设备的,放置在链接列表中。
您必须将.hidden-sm
和.hidden-xs
类添加到<li>
元素,以避免将其放入折叠列表中(在小型设备上)
<header>
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<img class="logo" src="http://placehold.it/95/3498db/fff">
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="hidden-xs hidden-sm"><a href="#" class="logo-link"><img class="logo" src="http://placehold.it/95/3498db/fff"></a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
<li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
</ul>
</div>
</div>
</div>
</header>
@media (max-width: 768px) {
.navbar-header {
text-align: center;
}
.navbar-toggle {
float: none;
}
}
注意:我建议避免使用内联样式。
技巧是通过CSS-在媒体查询中,对于较小的屏幕,请隐藏此徽标。
@media (max-width: 600px) {
li.className{
display: none;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.