Bootstrap 3 个导航链接在大屏幕上不是内联的

Question

我正在将父主题的导航更改为 bootstrap 默认值（我正在创建子主题，并且父主题已经使用 bootstrap）父主题已经在 functions.php 中包含 bootstrap 代码（还有一堆我不需要的其他导航 js 文件）所以我将 header.php 复制到子主题中并替换了默认的导航信息。

除了在正常大小的屏幕上链接堆叠在另一个之上而不是旁边之外，一切都在功能上运行良好。并且 :hover 状态（背景颜色）点亮了导航栏的整个宽度。当我使用默认代码（未链接到 wordpress 菜单）时，它工作正常。但是当我添加 wp 代码时，它会堆叠链接。

        <div class="collapse navbar-collapse navbar-ex1-collapse"> 
                    <?php /* Primary navigation */
                        wp_nav_menu( array(
                        'menu' => 'top_menu',
                        'depth' => 2,
                        'container' => false,
                        'menu_class' => 'nav',
                        //Process nav menu using our custom nav walker
                        'walker' => new wp_bootstrap_navwalker())
                        );
                    ?>
                </div>

我没有更改 style.css 或 functions.php 中的任何内容，只是添加了代码行

require_once('wp_bootstrap_navwalker.php');

因为父主题没有。

Answer 1

尝试将 navbar-nav 添加到您的菜单中 class

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <?php /* Primary navigation */
        wp_nav_menu( array(
        'menu' => 'top_menu',
        'depth' => 2,
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        //Process nav menu using our custom nav walker
        'walker' => new wp_bootstrap_navwalker())
        );
    ?>
</div>

Bootstrap 3 个导航链接在大屏幕上不是内联的

Bootstrap 3 nav links not inline on large screen

css

wordpress

parent-child

twitter-bootstrap