Question

我的网站www.morvargh-sailing.co.uk遇到了问题。我正在使用Bootstrap 3和普通的css，而不是等等。

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

我也使用wordpress，因此使用自定义导航文件使引导菜单起作用。下面是我的导航栏的php和css。任何人都可以指出我在哪里出错了正确的方向。（N.B.我的媒体查询是空的。）

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的媒体查询中。然后它将仅在显示完整菜单时应用，但不会应用于折叠菜单。

您也可以更改浮动而不是使用实用程序类.pull-right，以便菜单项将在折叠菜单中左移。

Bootstrap 3 Nav崩溃css问题

1 个答案: