如何对右侧导航栏切换

我想有切换导航栏和这两个登录和注册右侧的按钮，但增加了导航栏后登录按钮切换它显示在导航栏下方如何对右侧导航栏切换

<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Readself.in</a> 
    </div> 
    <div class="collapse navbar-collapse" id="mainNavBar"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Course</a></li> 
     <li><a href="#">About</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">My profile <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Friends</a></li> 
       <li><a href="#">Photos</a></li> 
       <li><a href="#">Settings</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
    <!-- Login --> 
    <ul class="nav navbar-nav navbar-right" style="clear: both;"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
    </ul> 
</div>

Screen shot of the problem

来源

2016-01-04 Takshak Rajput

您的注册和登录ul是在div之外。除非你有一些自定义的css改变默认行为，divs是显示块，这使得它们占据了它们父级的全部宽度。检查兄弟元素，看看哪些正在占用剩余的空间。 – Taplar

好吧，我要试试。 –

工作从内联样式删除clear:both，把ul内的<div class="collapse navbar-collapse" id="mainNavBar">

这里是一个工作Example

导航栏的代码应该是这样的：

<div class="collapse navbar-collapse" id="mainNavBar"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Course</a></li> 
     <li><a href="#">About</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">My profile <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Friends</a></li> 
       <li><a href="#">Photos</a></li> 
       <li><a href="#">Settings</a></li> 
      </ul> 

     </li> 
    <!-- Your ul --> 
    </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
    </ul> 
</div>

来源

2016-01-04 21:12:51

您的注册和登录UL是div.navbar-nav之外尽量让他们里面，然后使用pull-right到您的内容移动到右

在此PEN

来源

2016-01-04 21:12:13 Gintoki

非常感谢，我非常感谢。 –

如何对右侧导航栏切换

回答

相关问题