Bootstrap 3.1.1導航欄摺疊按鈕位置不正確

Question

我正在使用Bootstrap v 3.1.1並已自定義了我希望navbar使用爲Bootstrap提供的customisation page摺疊的狀態。

但是，我收到頁面縮小到平板屏幕尺寸以下時，摺疊按鈕位置不正確的問題。

我已定製@grid-float-breakpoint較少變量@screen-md-min這確實會導致導航欄在正確的屏幕尺寸塌陷，但直到我縮小窗口傳遞平板屏幕尺寸（@screen-sm-min）按鈕具有定位問題。

我失去了一個進一步的變量定製？

Answer 1

調查了這一點後，我發現css自定義沒有問題，這是事實，我已經使用class="container"將我的導航欄包裝在div中，但也在導航欄中使用了相同的類。 ..

<div class="container"> <!-- <<< wrapping container div --> 
    <nav class="navbar navbar-inverse" role="navigation"> 
     <div class="container"> <!-- <<< root cause of positioning issue --> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 

的修復程序很簡單，我只是改變了DIV導航欄裏面使用class="container-fluid"代替，這使它能夠正確地安裝到包裝的div寬度...

<div class="container"> <!-- <<< wrapping container div --> 
    <nav class="navbar navbar-inverse" role="navigation"> 
     <div class="container-fluid"> <!-- <<< here is the fix --> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 

檢查this working fiddle爲t他完整的例子。