引导切换打开菜单不跨越 100% 的屏幕宽度



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

在较小的屏幕上折叠时,下拉菜单不会跨越 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>

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

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

引导

最新更新