2

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

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

<!-- 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>
4

1 回答 1

1

twitter bootstrap 中有预定义的类用于响应式渲染。正如您所提到的，您<a class="dropdown-toggle visible-desktop" .../>只能在更大的屏幕上显示。其他可用的类是 .visible-phone、.visible-tablet、.hidden-phone、.hidden-tablet、.hidden-desktop。

于 2012-08-30T12:53:45.650 回答