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

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

1 个答案: