Css 平板电脑/手机上折叠导航显示的列表图标

我试图通过Twitter引导使我的网站响应，但我在导航方面遇到了一些问题。我正在使用bootstrap的导航菜单，但它不会变为平板电脑/手机上的下拉按钮。它只在我的iPad是纵向的时候才显示，但在横向的时候不显示

我正在使用以下媒体查询：

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { }

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { }

/* Landscape phones and down */
@media (max-width: 480px) { }

HTML:

---

您是否使用Twitter引导？是的，Twitter引导请阅读标签说明。标签“bootstrap”连接到另一个主题。您可以发布HTML？和纵向/横向屏幕截图吗？

<nav class="navbar">
    <div class="row">               
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>

        <div class="nav-collapse collapse">
            <ul class="nav pull-right">
                <li class="home active"><a href="">HOME</a></li>
                <div class="nav-separator hidden-desktop"></div>
                <li><a href="projecten">PROJECTEN</a></li>
                <div class="nav-separator hidden-desktop"></div>
                <li><a href="sketch">SKETCH</a></li>
                <div class="nav-separator hidden-desktop"></div>
                <li><a href="contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>