Bootstrap 切换打开菜单不跨越 100% 的屏幕宽度答案

【问题标题】：Bootstrap Toggle Open Menu not spanning 100% width of screenBootstrap 切换打开菜单不跨越 100% 的屏幕宽度
【发布时间】：2016-03-05 20:25:04
【问题描述】：

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

在较小的屏幕上折叠时，下拉导航菜单不会覆盖 100% 的屏幕 - 菜单两侧似乎有 1 像素的间隙，我似乎不知道如何解决这个。

** 编辑 **

由于我原始帖子中的标记错误 - 我已在 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>

【问题讨论】：

您能在jsfiddle.net/yuxwh8cm 中重现问题吗？
我在您的示例链接上看到了同样的情况。我进一步注意到，所有媒体查询都可能出现问题，因为似乎边框底部属性在页面结束之前几乎“向上弯曲”。添加一个额外的 Navbar-fixed-top 类可以拉直轻微的曲线，但我的意图是有一个标准的 Nav，然后附加在滚动上，所以我想避免使用 navbar-fixed-top。边框半径：0px；帮助微乎其微，但仍有差距。
拐角处的曲线是由 bootstrap.min.css 中的@media (min-width:768px){.navbar{border-radius:4px}} 引起的。您可以在您的 CSS 中覆盖它，但我看不到较小尺寸的 1 像素间隙。
您发布的代码很难看出问题，标记有问题（额外和缺少标签）您可以创建一个示例来说明问题吗？
我不确定我是怎么处理标记的，从而把它搞得这么糟糕。我现在已经修复它并在原始编辑的帖子中添加了一个小提琴链接！

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是因为 .navbar-collapse.. 上的 Bootstrap 边距，这是 15px 的负边距。只需将其每边移出一个像素：

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

Bootply

【讨论】：

谢谢！我已经更新了这个答案（这里相当新，它还不会显示）。
您更新了答案？你是想说问题吗？