WordPress菜單的引導問題

Question

我將引導Navbar與正在開發的Wordpress主題集成在一起。 但是，我的菜單被擠壓在一起，並且ul＆li標簽內沒有空格或設計。 我已經嘗試了一切可能使引導程序正常運行，但是迷路了。

誰能為我指出正確的方向來解決此問題，或者可能給我解決方案？ 感謝您的任何幫助。

實時網站： https ： //publifiedlabs.com/sandbox-theme/

這是我的代碼塊

           <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="<?php echo home_url( '/' ); ?>">
                    <img src="https://publifiedlabs.com/wp-content/uploads/2016/04/main-logo.png" alt="<?php //get alt tag for image ?>">
                    </a>
                </div> <!-- ./navbar-header -->
                    <div class="search-form-container">
                    <?php get_search_form(); ?>
                </div>
                <!-- Begin wp_nav_menu -->
                        <div class="navbar navbar-nav float-md-right" id="navbarSupportedContent">
                        <?php   // This brings in the menu in the proper style with bootstrap
                                    wp_nav_menu( array(
                                        'theme_location'    =>'primary',
                                        //'depth'             => 2,
                                        'container'         => '',
                                        'fallback_cb'       => '',
                                        //'menu_class'        => 'navbar-nav mr-auto',
                                        'items_wrap'        => '<ul class="navbar-nav">%3$s</ul>',
                                        'walker'            => new pbf_walker_nav_primary(),
                                        'echo'              => true
                                        ) 
                                    ); ?>
            </div> <!-- /.container-fluid -->
        </nav>

這是輸出的HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="https://publifiedlabs.com/sandbox-theme/">
                            <img src="https://publifiedlabs.com/wp-content/uploads/2016/04/main-logo.png" alt="">
                            </a>
                        </div> <!-- ./navbar-header -->
                            <div class="search-form-container">
                            <form role="search" method="get" action="https://publifiedlabs.com/sandbox-theme/">
    <input type="search" class="form-control" placeholder="Search" value="" name="s" title="Search">
</form>                        </div>
                        <!-- Begin wp_nav_menu -->
                                <div class="navbar navbar-nav float-md-right" id="navbarSupportedContent">
                                    <ul class="navbar-nav"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item active menu-item-16 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/">Home</a></li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-15 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/about-us/" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
    <ul class="dropdown-menu depth_0 nav navbar-nav">
        <li id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35 nav-item"><a href="#">Contact</a></li>
    </ul>
    </li>
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/blog/">Blog</a></li>
    </ul>                    </div> <!-- /.container-fluid -->
                    </div></nav>

菜單問題圖片：

Answer 1

在您的第一個代碼示例中，從中刪除navbar-expand-lg

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Answer 2

以下是此帖子中問題的答案。

我所做的就是在我的functions.php文件中添加以下代碼。

// This controls the <a></a> class
function add_menuclass($ulclass) {
    return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
 }
 add_filter('wp_nav_menu','add_menuclass');

參考鏈接： 如何在wp_nav_menu中添加要鏈接的類？