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

【问题标题】：Bootstrap 3.1.1 navbar collapse button is not positioned correctlyBootstrap 3.1.1 导航栏折叠按钮未正确定位
【发布时间】：2014-03-25 06:55:34
【问题描述】：

我正在使用 Bootstrap v 3.1.1，并使用为 Bootstrap 提供的 customisation page 自定义了我希望 navbar 折叠的状态。

但是，在我将页面缩小到低于平板电脑屏幕尺寸之前，我遇到了折叠按钮位置不正确的问题。

我已将@grid-float-breakpoint less 变量自定义为@screen-md-min，这确实会导致导航栏以正确的屏幕尺寸折叠，但在我缩小窗口通过平板电脑屏幕尺寸（@screen-sm-min）之前，按钮存在定位问题。

我是否缺少进一步的变量自定义？

【问题讨论】：

您有代码示例，使用 JSFiddle 或 codepen.io 等吗？

标签： css twitter-bootstrap less

【解决方案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 以获得完整的固定示例。

【讨论】：