Question

我在我的项目中使用Bootstrap 3，并且我使用Tabs作为我的顶级导航。

我的问题是，当我调整页面大小并使其缩小时，菜单不会像通常那样更改为平板电脑/移动设备菜单。

我在代码中遗漏了什么？

这是菜单代码：

 <ul class="nav nav-tabs">
    <li class="active">
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">one</a>
    </li>
    <li>
      <a href="#">two</a>
    </li>
    <li>
      <a href="#">three</a>
    </li>
    <li>
      <a href="#">four</a>
    </li>
</ul>

Answer 1

使用此：

<nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">one</a>
                        </li>
                        <li>
                            <a href="#">two</a>
                        </li>
                        <li>
                            <a href="#">three</a>
                        </li>
                        <li>
                            <a href="#">four</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

Bootstrap 3选项卡菜单没有折叠

1 个答案: