Wordpress Bootstrap Navbar问题

Question

您好，我所有的问题都与Wordpress格式有关

我一直在尝试将Bootstrap导航栏从HTML转换为Wordpress格式。.我正面临UI问题。出现格式问题菜单垂直下降而不是水平分散。任何帮助或参考都将有所帮助

textbox

以下是HTML格式供参考

1. Wordpress Format
    <div id = "navbar">
    <nav class="navbar navbar-expand-lg fixed-top navbar-light">
        <div class = "container">
            <a class="navbar-brand" href="/xyz.jpg">
                <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/logo.png"  alt="logo">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button><!-- NAVBAR TOGGLER -->

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto nav-fill">
                    <?php


                    wp_nav_menu( array(
                       // Menu                      Element Name
                        'menu'              =>  'main menu ',
                        'theme_location'    =>  'primary',
                        'container'         =>  'nav',
                        'container_class'   =>  'navbar-collapse collapse',
                        'menu_class'        =>  'nav navbar-nav navbar-right',
                        // 'walker'             =>   new wp_bootstrap_navwalker()
                    ) );

                    ?>

                </ul><!-- NAVBAR NAV -->
            </div><!-- COLLAPSE NAVBAR ENDS -->
        </div><!-- CONTAINER ends here -->
    </nav>
</div>