Question

我目前第一次使用bootstrap（http://getbootstrap.com），我有一个包含主菜单的页面，然后是一个二级菜单。

我主要使用它，但在移动设备上观看时，按下菜单按钮，菜单栏和菜单内容之间存在差距，如下面的屏幕截图所示

我想摆脱差距所以菜单内容直接位于导航栏下方（仍显示底部边框）

以下是我的第二个导航栏的代码

<div class="navbar-wrapper" style="padding: 5px;">
        <div class="container" style="padding: 5px;">

            <nav class="navbar navbar-xs navbar-static-top" style="background-color: #E2DFE5; border: solid thin black; margin: 0;">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#portalNav" aria-expanded="false" aria-controls="navbar" style="margin-top: 0 !important;">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar" style="background-color: black;"></span>
                            <span class="icon-bar" style="background-color: black;"></span>
                            <span class="icon-bar" style="background-color: black;"></span>
                        </button>
                    </div>
                    <div id="portalNav" class="navbar-collapse collapse" style="background-color: #E2DFE5;">
                        <ul class="nav navbar-nav" style="height: 25px;">
                            <li><a href="/">Portal Dashboard</a></li>

                        </ul>

                        <ul class="nav navbar-nav navbar-right" style="margin-right: 3px;">
                            <li><a href="/administrator/logout.php">Logout</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

Answer 1

考虑样式的一般声明：

* {
   padding: 0px;
   margin: 0px;
}

这将告诉您：对网页上的所有元素使用0填充和0边距。

这可能会解决问题。此外，在调试时，暂时设置

是一个很好的技巧

border: solid black 1px;

两个菜单都可以看出哪一个导致了这个差距。我会将这一行添加到两种样式中，具体取决于差距的来源 - 排除故障。

第二个引导程序导航栏在菜单栏和移动设备上的菜单内容之间存在差距

1 个答案: