Question

我有这个导航栏

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header ">
                <a class="navbar-brand" href="#">QuADS</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar_collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar_collapse" >
                <ul class="nav navbar-nav navbar-right">
                    <li data-toggle="collapse" data-target="#navbar_collapse">
                       <a href="#">Home</a></li>
                    <li data-toggle="collapse" data-target="#navbar_collapse">
                       <a href="#">View Activity</a></li>
                    <li data-toggle="collapse" data-target="#navbar_collapse">
                       <a href="#">Log out</a></li>
                </ul>
            </div>
        </div>
      </nav>

在移动视图中，如果我点击该图标栏，它会完美地来回切换。即使我点击菜单项，我也希望它被切换。所以我也将data-toggle="collapse" data-target="#navbar_collapse"添加到菜单列表项中。

现在移动视图，按预期工作。但桌面视图，当我点击菜单项时，会显示一些异常的水平溢出。见jsfiddle

Answer 1

编辑：我唯一能想到的是使用hidden-lg和hidden-md创建2个导航栏1

另一个hidden-sm和hidden-xs

这样您可以为不同的视图创建不同的navabars！

Edit2：如果您为导航栏指定了类：hidden-lg和hidden-md，则表示它不会在大屏幕上显示。

如果您为导航栏指定了类：hidden-sm和hidden-xs，则表示它不会在小屏幕上显示。

这样您就可以为已经拥有hidden-sm和hidden-xs课程的导航栏添加target="#navbar_collapse"。

您可以为移动视图创建第二个包含hidden-lg和hidden-md类的内容。

希望它有所帮助！

navbar-toggle显示不同的水平溢出视图

1 个答案: