导航栏，右边部分倒塌

我有一个很难搞清楚我如何可以实现自举3个菜单的方式，使得它是正确的，浮动的，而部分坍塌，例如：导航栏，右边部分倒塌

Brand       Item 1 Item 2 Item 3 Item 4

倒塌时看起来这样：

Brand       Item 4 [Toggle menu]

我觉得我越来越近，但不能使其正常工作：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".menu-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="#">Brand</a> 
 
</div> 
 
<div class="navbar-right"> 
 
    <div class="collapse navbar-collapse menu-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li>Test right-middle</li> 
 
     </ul> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li>Test right-most</li> 
 
    </ul> 
 
</div>

任何想法如何修复“测试最右”不推到下一行？

来源

2017-01-03 user1970395

包括独立的navbar-header为非折叠物品

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 

    <!-- Title --> 
    <div class="navbar-header pull-left"> 
     <a href="#" class="navbar-brand">BRAND</a> 
    </div> 

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> 
    <div class="navbar-header pull-right"> 
     <ul class="nav pull-left"> 

     <li class="navbar-text pull-left">Item 3</li> 


     </ul> 

     <!-- Required bootstrap placeholder for the collapsed menu --> 
     <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
    </div> 



    <!-- Additional navbar items --> 
    <div class="collapse navbar-collapse navbar-right"> 
     <!--      pull-right keeps the drop-down in line --> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

个

JSFIDDLE

来源

2017-01-03 11:46:37

感谢，我觉得有人编辑我的问题，必须删除了某个地方关闭标签。它并不能解决我的问题，因为我需要在菜单折叠时将“测试最右边”放置在切换按钮的左侧 – user1970395

我已更新您的要求的mu代码 –

再次感谢您:)它似乎近乎完美，也许它只是一个纯粹的问题，但切换菜单有点不明显 - 似乎项目3的方式不同，它从项目3留下。但我想我会设法自行解决它。非常感谢！ :)标记为答案 – user1970395

尝试把内容与类div中：navbar-header

因此，而不是宣称的：

<div class="navbar-right">

使用下面的类来代替：

<div class="navbar-header pull-right">

来源

2017-01-03 11:46:23

导航栏，右边部分倒塌

回答

相关问题