在 Twitter Bootstrap 中折叠时隐藏下拉菜单的子项

Question

我的导航栏中有一个下拉菜单，但它有很多子项目。这在较大的屏幕上很好，但是当导航折叠时，它们并没有真正重要到占据它们所占用的所有空间。

有什么方法可以在折叠时关闭下拉菜单，或者删除下拉菜单和子项目并将其替换为锚标记（它将转到用户可以选择子项目的页面）？还是我的想法全错了？

<!-- Navbar -->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">

       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

        <a class="brand" href="/">mybrand</a>
        <div class="nav-collapse">
        <ul class="nav">
            <li<{if $contenttemplate == "option1"}> class="active" <{/if}>><a href="/">option1</a></li>
            <li<{if $contenttemplate == "option2"}> class="active" <{/if}>><a href="/option2">option2</a></li>
            <li<{if $contenttemplate == "option3"}> class="active" <{/if}>><a href="/option3">option3</a></li>
            <li<{if $contenttemplate == "dropdown"}> class="dropdown active" style="background-color:rgba(0,0,0,0.5);"
            <{else}> class="dropdown"<{/if}>>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">lists<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="/lists/number1">number1</a></li>
                <li><a href="/lists/number2">number2</a></li>
                <li><a href="/lists/number3">number3</a></li>
                <li><a href="/lists/number4">number4</a></li>
            </ul>
            </li>
        </ul>
        </div><!--/.nav-collapse -->
    </div>
    </div>
</div>

Answer 1

Twitter Bootstrap 中有预定义的类用于响应式渲染。您可以使用 仅在您提到的较大屏幕上显示。其他可用的类有 .visible-phone、.visible-tablet、.hidden-phone、.hidden-tablet、.hidden-desktop。