导航栏切换按钮不起作用

时间:2017-02-09 06:56:49

标签: html css twitter-bootstrap nav

当我在移动视图中缩小屏幕时,我的切换按钮无效。你能告诉我原因吗。

这是我的代码。 先感谢您。

<nav class="navbar navbar-default mmn-navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle mmn-navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false" style="border: none;">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
            </button>
            <a class="navbar-brand managemyngo-font" style="color: white; padding: 1em;" href="#">ManageMyNGO</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse" style="border: none;">
            <div class="nav navbar-nav navbar-right menu-font menu" style="color: white;">
                <?php
                    wp_nav_menu( array( 
                         'theme_location' => 'header-menu', 
                         'container' => 'nav',
                         'container_class' => 'topnav'
                    ) ); 
                ?>
            </div>
        </div>
    </div>
</nav>

1 个答案:

答案 0 :(得分:0)

 final FlowLayoutContainer dropContainer = new FlowLayoutContainer();
 dropContainer.setBorders(true);

 DropTarget target = new DropTarget(dropContainer) {
   @Override
   protected void onDragDrop(DndDropEvent event) {
     super.onDragDrop(event);
     Widget window = (Widget) event.getData();
     dropContainer.add(window);
   }
 };
 target.setGroup("test");
 target.setOverStyle("drag-ok");

似乎工作正常。我刚刚将<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse mmn-navbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle mmn-navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false" style="border: none;"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span> <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span> <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span> </button> <a class="navbar-brand managemyngo-font" style="color: white; padding: 1em;" href="#">ManageMyNGO</a> </div> <div class="collapse navbar-collapse" id="nav-collapse" style="border: none;"> <div class="nav navbar-nav navbar-right menu-font menu" style="color: white;"> <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => 'nav', 'container_class' => 'topnav' ) ); ?> </div> </div> </div> </nav> </body> </html>更改为navbar-default,只是为了使切换菜单可见。确保您的页面中没有包含navbar-inverse两次。