Question

我在响应式网站上使用bootstrap。我有一个标签式内容，我希望它的导航标签可以在移动视图中与汉堡按钮折叠，就像this site中的标签式字形符号一样。我还附上图片了解更多细节这是我的nav-tabs标记代码：

<ul class="nav nav-tabs" id="descriptionTab" role="tablist">
    <li class="active" role="presentation">
        <a href="#briefDescription" role="tab" data-toggle="tab">brief description</a>
    </li>
    <li role="presentation">
        <a href="#introduction" role="tab" data-toggle="tab">introduction</a>
    </li>
    <li role="presentation">
        <a href="#access" role="tab" data-toggle="tab">access</a>
    </li>
    <li role="presentation">
        <a href="#times" role="tab" data-toggle="tab">times</a>
    </li>
    <li role="presentation">
        <a href="#ticketPrices" role="tab" data-toggle="tab">ticket prices</a>
    </li>
    <li role="presentation">
        <a href="#warnings" role="tab" data-toggle="tab">warnings</a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">                  
    <div class="tab-pane fade active in" id="briefDescription">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="introduction">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="access">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="times">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="ticketPrices">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="warnings">
        <h5></h5>
    </div>
</div>

我想使用这个汉堡按钮代码，就像当屏幕尺寸变得足够小时显示为切换按钮的那个，然后点击汉堡包按钮就可以折叠ul：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#descriptionTab">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

我想在移动视图中显示这些标签，如http://glyphicons.com/网站的屏幕截图：

mobile view

Answer 1

最后我找到了解决方案。所以我在这里写我的代码也许有人需要它。

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#descriptionTab">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="navbar-collapse collapse" id="descriptionTab">
    <ul class="nav nav-tabs" role="tablist">
        <li class="active" role="presentation">
        <a href="#briefDescription" role="tab" data-toggle="tab">brief description</a>
        </li>
        <li role="presentation">
            <a href="#introduction" role="tab" data-toggle="tab">introduction</a>
        </li>
        <li role="presentation">
            <a href="#access" role="tab" data-toggle="tab">access</a>
        </li>
        <li role="presentation">
            <a href="#times" role="tab" data-toggle="tab">times</a>
        </li>
        <li role="presentation">
            <a href="#ticketPrices" role="tab" data-toggle="tab">ticket prices</a>
        </li>
        <li role="presentation">
            <a href="#warnings" role="tab" data-toggle="tab">warnings</a>
        </li>
    </ul>
</div>

此外，我需要更改一些css规则，例如：

@media screen and (max-width: 769px){
    .nav-tabs > li{
    display:block;
    width:100%;
    }
}

我希望它会有所帮助：）

如何在bootstrap中使用汉堡包按钮进行导航选项卡？

1 个答案: