css - Bootstrap Toggle Open Menu 未跨越屏幕的 100% 宽度

Question

我在我正在制作的网站上放置的 Bootstrap 导航有点问题。

当在较小的屏幕上折叠时，下拉导航菜单不会跨越 100% 的屏幕 - 菜单两侧似乎有 1px 的间隙，我似乎无法弄清楚如何修复这个。

** 编辑 **

由于我原来帖子中的错误标记 - 我已经在 JSFIDDLE 更新了这个(仍然有问题，但这更好地代表了我的问题)

<div class="navbar navbar-custom">
<div class="container">

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
        <span class="fa fa-bars fa-2x"></span> Menu</button> 

        <span class="logo"> Logo</span>
    </div>

    <div class="collapse navbar-collapse" id="navigation">
        <ul class="nav navbar-nav navbar-right">
                <li><a href="#linkRemovedForNow">Book A Repair</a> </li>
                <li><a href="#about">About</a> </li>
                <li><a href="#howitworks">How it Works</a> </li>
                <li><a href="#testimonals">Testimonals</a> </li>
                <li><a href="#contact">Contact</a> </li>
            </ul>
    </div>

</div>

Answer 1

发生这种情况是因为 .navbar-collapse 上的 Bootstrap 边距 .. 这是一个 15px 的负边距。只需将它在每一侧移出一个像素即可:

.navbar-custom .container >.navbar-collapse {
    margin-right: -16px;
    margin-left: -16px;
}

Bootply