導航欄，右邊部分倒塌

我有一個很難搞清楚我如何可以實現自舉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

導航欄，右邊部分倒塌

回答

相關問題