Bootstrap 3.1.1导航栏折叠按钮未正确定位

Question

我正在使用Bootstrap v 3.1.1并使用为Bootstrap提供的navbar自定义了我希望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以获取完整的固定示例。