css - 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 添加到您的菜单类中

<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>