css - Bootstrap 3 Nav 折叠 css 问题

Question

我的网站 www.morvargh-sailing.co.uk 出现问题。我正在使用 Bootstrap 3 和普通的 css，不少于等等。

似乎我的媒体查询或导航栏的自定义 CSS 设置不正确，主导航栏没有响应。我可以单击三栏链接，但下拉菜单的样式不正确。

我也在使用 wordpress，因此使用自定义导航文件来使 Bootstrap 菜单正常工作。下面是我的导航栏的 php 和 css。谁能指出我出错的正确方向。 (注意，我的媒体查询是空的。)

PHP.

<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"     data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        <div class="brand">
            <h1>Morvargh Sailing Project</h1></a><p>Using Sail Training to Inspire and Change Lives</p>
        </div>
        </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
                <?php
                    wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'false',
                    'container_class'   => 'collapse navbar-collapse',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>

我的 CSS 样式是...

    /* NAVIGATION ============================================================ */

.navbar-wrapper
{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:10;
    margin-bottom:-70px
}

.navbar .navbar-inner
{

}

.navbar
{
    background-color: #1E1E1E;
    background-image: none;
    border: 0;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.navbar-inverse .navbar-collapse
{
    height:64px!important;
}

.brand h1, .brand h1 a, .brand h1 a:hover
{
    margin-left: 26px;
    color: #FFF;
    font-size:1.4EM;
    font-weight: 600;
    font-family: 'Open Sans',Arial,sans-serif;
    text-decoration:none;
    margin-top: 12px;
}

.navbar-header p
{
    margin-left: 35px;
    color: #09f;
    font-family: 'Reenie Beanie', cursive;
    font-size:26px;
    margin-top:-13px;
    margin-bottom:0px;
}


.navbar-nav
{
    margin: 7.5px 10px;
}

.navbar-nav > li > a
{
    height:58px;
    color: #fff!important;
}

.navbar-nav > li > a:hover
{
    height: 58px;
    border-bottom:solid 2px #09F;
    background:url(../img/menu_arrow.png)center bottom repeat-x
}

.navbar-nav > li > a:active
{
    height:58px;
    border-bottom:solid 2px #09F;
    background:url(../img/menu_arrow.png)center bottom repeat-x
}


.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus
{
    background-color: #1E1E1E;
    border-bottom:solid 2px #09F;
    background:url(../img/menu_arrow.png)center bottom repeat-x
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus
{
    background-color: #1E1E1E;
}

.dropdown-toggle
{
    height: 58px;
}

.navbar-nav > li > .dropdown-menu
{
    margin-top:3px;
    background-color: #1E1E1E;
    border: 0;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border-top:solid 2px #09F;
}

.navbar-nav > li > .dropdown-menu a
{
    color: #fff;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus
{
    background-color:#09F;
}

任何帮助或指示都会很有帮助!!!

Answer 1

如果您的意思是您的折叠菜单有一个滚动条，那么这是违规规则:

.navbar-inverse .navbar-collapse
{
    height:64px!important;
}

尝试将其包装在最小宽度:768px 的媒体查询中。然后它只会在显示完整菜单时应用，而不会在折叠菜单上应用。

您也可以更改那里的 float 而不是使用实用程序类 .pull-right，这样菜单项将在折叠菜单中向左浮动。