我有这个Bootstrap头菜单,我想要在UL导航和折叠按钮之后,右边的登录锚点。
我已尝试过.pull-right,但没有用。
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-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 class="navbar-brand" href="#">
<img alt="Logo" src=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li><a href="~/Home">home</a></li>
<li class="dropdown"><a href="#">link2</a></li>
<li class=""><a href="#">link3</a></li>
<li class=""><a href="#">link4</a></li>
<li class=""><a href="#" class="dropdown-toggle" data-toggle="dropdown">link4</a>
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-primary">
Login</a></div>
</nav>
</header>
答案 0 :(得分:1)
由于目前jsfiddle
存在问题,我会在此处粘贴已修改的代码:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="pull-right">
<a id="rightAnchor" href="#" class="btn btn-primary">
Login</a>
</div>
<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 class="navbar-brand" href="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li><a href="~/Home">home</a>
</li>
<li class="dropdown"><a href="#">link2</a>
</li>
<li class=""><a href="#">link3</a>
</li>
<li class=""><a href="#">link4</a>
</li>
<li class=""><a href="#" class="dropdown-toggle" data-toggle="dropdown">link4</a>
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
首先,您在div
结束标记之前错过了一个结束nav
。接下来,我在pull-right
button
之前的navbar-header
课程中添加了div。最后,添加一些边距,以便登录锚看起来与菜单相同:
#rightAnchor {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
更新:当我们有不同的分辨率时,我没有检查它的行为。怎么样:我们创建2个登录锚点并通过媒体查询控制它们的外观?使用此HTML将如下所示:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div id="rightAnchorMobile" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<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 class="navbar-brand" href="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<div id="rightAnchor" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li><a href="~/Home">home</a>
</li>
<li class="dropdown"><a href="#">link2</a>
</li>
<li class=""><a href="#">link3</a>
</li>
<li class=""><a href="#">link4</a>
</li>
<li class=""><a href="#" class="dropdown-toggle" data-toggle="dropdown">link4</a>
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
和CSS:
@media screen and (min-width:768px) {
#rightAnchorMobile {
display: none;
}
}
@media screen and (max-width: 768px) {
#rightAnchor {
display: none;
}
}
#rightAnchorMobile > a {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
#rightAnchor > a {
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
}