获取导航以涵盖整个列

[英]Get navigation to span whole of column


I am trying to get my navigation to span across the whole of my column. I am using Bootstrap and Wordpress. At the moment it looks like this, however I want it to stretch across the whole screen.

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

enter image description here

I tried adding the navbar justified class on bootstrap but then stopped it working when it went to responsive design.

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

Here is my code.

这是我的代码。

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

1 个解决方案

#1


0  

I added width of 100% to the containing menu and set the width of each individual button to 16.6% this worked.

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/10/16/3051e5c0718a922994233d30a5cd47d8.html



 
  © 2014-2022 ITdaan.com 联系我们: