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他完整的例子。