bootstrap导航栏nav-header小屏幕显示不了问题

Question

    <nav class="main-navigation">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="navbar-header">
                        <span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
                            <span class="sr-only">Toggle navigation</span>
                            <i class="fa fa-bars"></i>
                        </span>
                    </div>
                    <div class="collapse navbar-collapse" id="main-menu">
                        <ul class="menu">
                            <li class="nav-current" role="presentation"><a href="/">首页</a></li>
                            <li  role="presentation"><a href="#">论坛</a></li>
                            <li  role="presentation"><a href="#">快捷手册</a></li>
                            <li  role="presentation"><a href="#">中文文档</a></li>
                            <li  role="presentation"><a href="#">下载</a></li>
                            <li  role="presentation"><a href="#">关于</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

---

a{color: #e67e22;outline: none;text-decoration: none;}
.main-header .branding img{max-width: 100%;}
a:active,a:focus,a img{outline: none;}

.main-navigation{text-align: center;background: #fff;border-top: 1px solid #ebebeb;border-bottom: 3px solid  #e1e1e1;margin-bottom: 35px;}
.main-navigation .menu {padding: 0;margin: 0;}
.main-navigation .menu li {list-style: none;display: inline-block;position: relative;}
.main-navigation .menu li.nav-current {border-bottom: 2px solid #e67e22;margin-bottom: -2px;}
.main-navigation .menu li a {color: #505050;line-height: 4em;display: block;padding: 0 21px;}
.main-navigation .menu li:hover > a {color: #e67e22;text-decoration: none;}

求问，为什么nav-header的内容显示不了，求高手解答，谢谢！

Answer 1

题主写一个在线的Demo吧。

建议题主按照Bootstrap的推荐结构来写，如下：

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

http://v3.bootcss.com/examples/starter-template/

Answer 2

是不是没有插入外部CSS(bootstrap.css)？