标有"登录"的按钮需要被推到导航栏的右侧并与其他按钮正确对齐。这是一个了解它正在做什么的小问题。我正在使用bootstrap来设计它,并且在定位某些按钮时遇到问题。 https://jsfiddle.net/sterlingmd17/tk17zjfq/1/
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{a}}"> <a href="/">Home</a></li>
<li class="{{b}}"> <a href="#order">Order form</a></li>
<li class="{{c}}"> <a href="#about">About Swirlz</a></li>
<li class="{{d}}"> <a href="#contact">Contact</a></li>
<!--TODO fix login button positioning -->
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
</div>
</ul>
</div>
</nav>
答案 0 :(得分:0)
首先,将按钮div移到无序列表标签之外,然后将类navbar-form
和navbar-right
添加到按钮div。
看起来应该是这样的
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{a}}"> <a href="/">Home</a></li>
<li class="{{b}}"> <a href="#order">Order form</a></li>
<li class="{{c}}"> <a href="#about">About Swirlz</a></li>
<li class="{{d}}"> <a href="#contact">Contact</a></li>
</ul>
<!--TODO fix login button positioning -->
<div class="navbar-form navbar-right btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
</div>
</div>