Bootstrap Navbar自动切换

Question

我正在尝试使用Bootstrap为我的网站构建导航栏。我试图使用切换功能，允许在移动设备上更容易访问菜单。当我在浏览器上放大到200％时，它会切换到很好并且效果很好。但是，当我在手机上连接到我的网站时，它无法自动切换。

这是我的代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <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="index.php"><i class="fa fa-server"></i> Server List</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.php#server">Servers</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Purchase<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Highlighted Spot</a></li>
                        <li><a href="#">Advertising</a></li>
                    </ul>
                </li>
                <li><a href="#">Support</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">My Servers</a></li>
                        <li><a href="#">Favorites</a></li>
                        <li><a href="#">My Profile</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
              <li><a href="#">Logout</a></li>
            </ul>
        </div>
    </div>
</nav>

我已经尝试过我在网上找到的所有内容都无济于事，所以我非常感谢任何帮助我的人！