获取导航以涵盖整个列

Question

我正试图让我的导航跨越我的整个专栏。我正在使用Bootstrap和Wordpress。目前它看起来像这样，但是我想让它在整个屏幕上延伸。

我尝试在bootstrap上添加navbar justified类，但在进行响应式设计时停止了它的工作。

这是我的代码。

    <div class="row">
        <div class="col-md-12">
            <nav  id="menu1"  class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                     <div id="logo" class="pull-left hidden-md hidden-lg">
                            <div class="logo-small">
                                <img src="<?php bloginfo('template_directory');?>/images/logo-xs.png" alt="small-logo" class="img-responsive logo-phone"/>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                                    </div>
                         </div>
                </div>


                <?php

                        $args = array(
                                'theme_location' => 'main-menu',
                                'depth' => 0,
                                'container_class' => 'collapse navbar-collapse',
                                'menu_class' => 'nav navbar-nav',
                                'walker' =>  new wp_bootstrap_navwalker()

                        );

                        wp_nav_menu($args);
                ?>

            </nav>
            <div class="content-top-border hidden-md hidden-lg hidden-sm"></div>
        </div>
</div>

Answer 1

我在包含的菜单中添加了100％的宽度，并将每个按钮的宽度设置为16.6％。