css - Bootstrap 3 导航栏折叠异常

Question

Here我在 WordPress 中内置了一个 Bootstrap 3 导航栏，带有公共(public) navwalker 。当到达网格断点时它应该崩溃。但它显示了意外的行为，即在单击按钮之前显示切换内容并且没有正确的样式。

bs 折叠插件已存在。之前它进行了一些更改，但我在某个地方失败了。

我将非常感谢你的帮助。这是我的代码:

<div id="twitterbootstrap">
<nav class="navbar navbar-default <?php if ( !(is_front_page())): echo "navbar-fixed-top"; endif; ?>" role="navigation">
<div class="container" style="padding: 0;">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                     'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>

Answer 1

解决了问题:

当菜单展开时:

这里的问题是您在 theme.css 文件中覆盖了 bootstrap 的默认样式，特别是 theme.css line: 187:

.navbar-default, .navbar .navbar-nav, .navbar-collapse {
  display: inline-block !important;
  float: none;
  font-size: 14px !important;
  height: 50px;
  margin: 0;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

和theme.css行:207

.navbar-default .container div, .navbar .navbar-nav .container div, .navbar-collapse .container div, .navbar-default .container-fluid, .navbar .navbar-nav .container-fluid, .navbar-collapse .container-fluid {
  background-color: #eef8fd;
  float: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

删除这两个就可以了。