导航栏中的徽标，导航列表上方的间距以及徽标下方的徽标 [英] Logo in navbar, spacing above the navigation list, and below the logo
本文介绍了导航栏中的徽标，导航列表上方的间距以及徽标下方的徽标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
导航列表上方有一个空格，在标志下方有一个空格好。
如何排列他们两个？ （logo& nav）
我的标题图解释了问题：
我的代码：
<！doctype html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title> Bootstrap< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< link rel =stylesheethref =css / bootstrap.min.css>
< link rel =stylesheethref =css / custom4.css>
< script src =js / respond.js>< / script>
< / head>
< body>
< div class =row>
< nav class =navbar navbar-defaultrole =navigation>
< div class =navbar-header>
< img src =img / logo.pngalt =logoclass =visible-xs>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃collapse>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< / div>
< div class =container>
< div class =collapse navbar-collapseid =collapse>
< img src =img / logo.pngalt =logoclass =hidden-xs push-left>
< ul class =nav navbar-nav pull-right>
< li>< a href =＃class =active>主页< / a>< / li>
< li>< a href =＃>网页< / a>< / li>
< li>< a href =＃>博客< / a>< / li>
< li>< a href =＃> Portfilio< / a>< / li>
< li>< a href =＃>协议< / a>< / li>
< / ul>
< / div>
< / div>
< / nav>
< / div>
<！ - Javasctipt - >
< script src =http://code.jquery.com/jquery-latest.min.js>< / script>
< script src =js / bootstrap.min.js>< / script>
< / body>
< / html>
解决方案
在结构上，您的html不同于我的方法和文档在导航栏上实现导航栏。你把它放在col- *类中。如果图片是相同的图片，则不需要复制大小的徽标。您也可以只修改品牌和最小宽度的位置。不知道你的logo宽度，但你可以很容易地调整你所需要的最小宽度，也可以在最小宽度上调整父母a上的填充，以使它看起来符合logo。
DEMO： http://jsbin.com/aXAyicIS/1/
编辑： http://jsbin.com/aXAyicIS/1/edit
CSS
.navbar-brand {
width：100％;
padding：0 70px 0 15px;
}
/ *移动设备上的徽标图片* /
.navbar-brand img {
最大宽度：100％
}
.navbar-toggle {
position：absolute;
float：none;
right：0;
top：5px;
}
@media（min-width：768px）{
.navbar-brand {
float：none;
width：auto;
最大高度：无;
填充：0！重要;
}
.navbar-header {
float：left;
保证金：0;
宽度：30％;
}
/ * logo image * /
.navbar-brand img {
margin：0;
最大宽度：100％;
最大高度：无;
}
.nav.navbar-nav li.active a，
.nav.navbar-nav li.active a：hover {
background：transparent
}
＃nav-collapse {
float：right;
填充：0！重要;
保证金：0！重要;
宽度：70％;
}
}
HTML
< div class =navbar navbar-default navbar-static-toprole =navigation>
< div class =container>
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a href =yourlink.htmlclass =navbar-brand> < img src =http://placehold.it/300x80/444444/FFFFFF&text=LOGO> < / A>
< / div>
< div id =nav-collapseclass =collapse navbar-collapse>
< ul class =nav navbar-nav navbar-right>
< li class =active>< a href =＃testme1class =anchor> Anchor 1< / a>< / li>
< li>< a href =＃testme2class =anchor> Anchor 2< / a>< / li>
< li>< a href =＃testme3class =anchor> Anchor 3< / a>< / li>
< li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdown> Dropdown< b class =caret>< / b>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>测试< / a>< / li>
< li>< a href =＃>另一个连结< / a>< / li>
< li>< a href =＃>其他内容< / a>< / li>
< li class =divider>< / li>
< li class =dropdown-header> Nav header< / li>
< li>< a href =＃>分离式连结< / a>< / li>
< li>< a href =＃>另一个分离的连结< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
<！ - /。nav-collapse - >
< / div>
<！ - /。container - >
< / div>
<！ - 。navbar - >
I have been trying to code a responsive header using Bootstrap 3, I just have one.
There is a space above the navigation list, and below the logo as well. How can I line up the two of them? (logo&nav)
Picture of my header which explains the problem:
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<script src="js/respond.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<img src="img/logo.png" alt="logo" class="visible-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="collapse navbar-collapse" id="collapse">
<img src="img/logo.png" alt="logo" class="hidden-xs push-left">
<ul class="nav navbar-nav pull-right">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfilio</a></li>
<li><a href="#">Conact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
解决方案
Structurally your html differs than my approach and from the docs on bootstrap for the navbar implementation. You put .row around col-* classes. You don't need to duplicate the logo for small and large, if it's the same image. You can also just modify the brand and positioning in the min-width. Don't know your logo widths, but you can easily adjust in the min-width what you need and, also in the min-width, adjust the padding on the parent a so that it visually is in line with the logo.
DEMO: http://jsbin.com/aXAyicIS/1/
EDIT: http://jsbin.com/aXAyicIS/1/edit
CSS
.navbar-brand {
width: 100%;
padding: 0 70px 0 15px;
}
/* logo image on mobile */
.navbar-brand img {
max-width: 100%
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
@media (min-width:768px) {
.navbar-brand {
float: none;
width: auto;
max-height: none;
padding: 0!important;
}
.navbar-header {
float: left;
margin: 0;
width: 30%;
}
/* logo image */
.navbar-brand img {
margin: 0;
max-width: 100%;
max-height: none;
}
.nav.navbar-nav li.active a,
.nav.navbar-nav li.active a:hover {
background: transparent
}
#nav-collapse {
float: right;
padding: 0!important;
margin: 0!important;
width: 70%;
}
}
HTML
<div class="navbar navbar-default navbar-static-top" 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="yourlink.html" class="navbar-brand"> <img src="http://placehold.it/300x80/444444/FFFFFF&text=LOGO"> </a>
</div>
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#testme1" class="anchor">Anchor 1</a></li>
<li><a href="#testme2" class="anchor">Anchor 2</a></li>
<li><a href="#testme3" class="anchor">Anchor 3</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Test</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--.navbar-->
这篇关于导航栏中的徽标，导航列表上方的间距以及徽标下方的徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
