Question

我的标题中有两个导航栏，其中心是我的标识。我正在使用WordPress，还包括bootstrap类。我在移动视图或最大宽度为700+像素之间有问题。我的导航菜单在700像素以下时被破坏了。我提供了一个截图来确定我的问题。

此处还有我的网站：http://bxuwp.codebox.ph/

以下是我的问题的屏幕截图：

这是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="logo-wrapper">

        <div class="logo">
            <?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
            <?php else : ?>
                  <img class="logo" src="<?php echo get_bloginfo('template_url') ?>/images/qmark_logo.png"/>
            <?php endif; ?>
        </div>
    </div>

    <div class="half">      
        <ul class="left-navlist">
            <?php
            $args = array(
                  'container'      => 'div',
                  'container_class'   => 'collapse navbar-collapse pull-right',
                  'container_id'      => 'bs-example-navbar-collapse-1',
                  'menu'        => 'left',
                  'menu_class'        => 'nav navbar-nav',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker()
            );
            ?>
            <?php wp_nav_menu($args); ?>
        </ul>
    </div>
    <div class="half">      
        <ul class="right-navlist">
            <?php
            $args1 = array(
                  'container'      => 'div',
                  'container_class'   => 'collapse navbar-collapse',
                  'container_id'      => 'bs-example-navbar-collapse-1',
                  'menu'        => 'right',
                  'menu_class'        => 'nav navbar-nav',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker()
            );
            ?>
            <?php wp_nav_menu($args1); ?>
        </ul>
    </div>
    </div>
    </div>

这是我用于bootstrap导航栏的小型自定义CSS：

.navbar-fixed-top {
    min-height: 95px;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: #e1e1e1;
    color: #fff;
}
.navbar-inverse {
    border-radius: 0px;
    margin-bottom: 0;
    background-color: #e1e1e1;
    border-color:#e1e1e1;
    font-size: 16px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #e1e1e1;
    color: #993300;
}
.navbar-inverse .navbar-nav > li > a {
    color: #252525;
}
.logo-wrapper {
    text-align: center;
    margin-bottom: -65px;
}

.logo {
    margin-top: 5px;
    max-width: 80px;
    display: inline-block;
}
.half {
    width: 50%;
    display: block;
    float: left;
}

.right-navlist {
    padding-left: 60px;
}

.left-navlist {
    text-align: right;
    padding-right: 60px;
}

Answer 1

您有一个媒体查询，使导航浮动仅保留至少768像素。有些浏览器渲染的像素略有不同，所以你可能已经注意到它并不完全是768px。删除查询（或覆盖它），你会没事的！

@media (min-width: 768px) {
    .navbar-nav>li {
        float: left;
    }
}

仅仅是一个FYI，你将有大约400px的相同问题，所以你可以做到这样，使你的文字在那个窗口大小较小。基本上，如果文本在窗口大小为400px时保持相同的大小，则这些元素的容器太小并且会使其中一个容器碰到（联系我们）。再次，这只发生在400px左右。您可能想要给它替代治疗，而不是像控制滑动到视图中的导航的汉堡包图标。

在wordpress移动视图中的Bootstrap导航菜单

1 个答案: