我的导航栏没有折叠怎么解决？

Question

我已经为可折叠的导航栏编写了代码，但是当我开始使其可工作时，它首先根本不起作用，当我创建整个页面之后，我检查了它是否不起作用。现在我不能找不到任何错误或缺少的东西。请参见下面的代码并帮助我！

    <div class="header">
        <nav id="main_menu" class="navbar" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                                  <i class="fa fa-bars"></i>
                        </button>

                    </div>
                    <div><a href="#" class="navbar-brand">flati</a></div>

    <div class="navbar-collapse collapse " id="menu" style="height: 1px;">
                    <ul class="nav navbar-nav pull-right">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Pages</a></li>
                                <li><a href="#">Work</a></li>
                                <li><a href="#">Style</a></li>
                                <li><a href="#">Extras</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                    </nav>

                </div>

我希望导航栏可以折叠起来