首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Bootstrap Toggle Open Menu not spanning 100% screen width of screen

Bootstrap Toggle Open Menu not spanning 100% screen width of screen
EN

Stack Overflow用户
提问于 2016-02-26 18:21:38
回答 1查看 697关注 0票数 0

我把Bootstrap nav放在我正在制作的一个网站上,这对我来说有点问题。

当在较小的屏幕上折叠时,下拉导航菜单不会覆盖100%的屏幕-它看起来好像在菜单的两边都有一个1px的间隙,我似乎找不到解决这个问题的办法。

**编辑**

由于我最初的帖子中有错误的标记-我在JSFIDDLE更新了这个(仍然有问题,但这更好地代表了我的问题)

代码语言:javascript
运行
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2016-02-27 03:17:03

这是因为.navbar-collapse上的引导程序余量造成的。这是15px的负边距。只需将其每边向外移动一个像素:

代码语言:javascript
运行
复制
.navbar-custom .container >.navbar-collapse {
    margin-right: -16px;
    margin-left: -16px;
}

Bootply

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35649104

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档