android - 无法使导航按钮在 lg 和 md View 上消失，无法下拉菜单按钮

Question

我希望就我在编写一个简单的响应式网站时无法解决的问题向你们寻求一些建议。

在 xs View 中，导航按钮根本不应该出现，下拉框应该被激活。

我正在使用 Twitter Bootstrap 。

这是我的代码:

<nav id="header-nav" class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">
                <a href="index-html"><h1>Food, LLC</h1></a>
            </div>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
            <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 id="collapsable-nav" class="collapse navbar-collapse">
       <ul id="nav-list" class="nav navbar-nav navbar-right">
            <li>
                <a href="chicken.html"><span class="visible-xs"></span>Chicken</a>
            </li>
            <li>
                <a href="beef.html"><span class="visible-xs"></span>Beef</a>
            </li>
            <li>
                <a href="seafood.html"><span class="visible-xs"></span>Seafood</a>
            </li>
            </ul>

css编码如下:

body {
    font-size: 16px;
    color: #F0FFFF;
    background-color: #778899;
    font-family: 'Source Sans Pro', sans-serif;

#header-nav {
    background-color: #2F4F4F;
    border-radius: 0;
    border: 0;
    padding: 25px;
}
.navbar-brand h1 { /**Restaurant name**/
    font-family: 'Jura', sans-serif;
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bolder;
    text-shadow: 1.5px 1.5px #FFD700;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 0.5;
}
.navbar-brand a:hover, .navbar-brand a:focus {
    text-decoration: none;
}
#nav-list {
    margin-top: 10px;
}
#nav-list a {
    color: #FFFAF0;
    text-align: center;
}
#nav-list a:hover {
    background: #FFD700;
}
#nav-list a span {
    font-size: 1.5em;
}

有人可以指出我哪里做错了吗？为什么我仍然可以在标题处看到导航按钮？为什么在 xs View 中菜单不下拉？

谢谢，感谢帮助!

Answer 1

试试这个对我有用

  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script>
<nav id="header-nav" class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">
                <a href="index-html"><h1>Food, LLC</h1></a>
            </div>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
            <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 id="collapsable-nav" class="collapse navbar-collapse">
   <ul id="nav-list" class="nav navbar-nav navbar-right">
        <li>
            <a href="chicken.html"><span class="visible-xs"></span>Chicken</a>
        </li>
        <li>
            <a href="beef.html"><span class="visible-xs"></span>Beef</a>
        </li>
        <li>
            <a href="seafood.html"><span class="visible-xs"></span>Seafood</a>
        </li>
        </ul>
    </div>
</div>