Question

我有一个使用bootstrap的标签菜单。我的代码是这样的，

<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle red" data-toggle="collapse" data-target="#Menu" id="menuButton">
            <span class="sr-only red">Toggle navigation</span>
            <span class="icon-bar red"></span>
            <span class="icon-bar red"></span>
            <span class="icon-bar red"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse" id="Menu">
        <ul class="nav nav-tabs" id="myNavbar">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        </ul>
    </div>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
                <h3>HOME</h3>
                <p>Some content.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Some content in menu 1.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Some content in menu 2.</p>
        </div>
    </div>

 </div>

出于某种原因，当我重新调整窗口大小时，堆叠的三个条在页面的右上角是不可见的。如果我单击该不可见的空白区域，如果再次单击，菜单将展开并折叠。

我在这里缺少什么？

我的示例代码here

Answer 1

navbar-toggle icon-bar未设置背景颜色。您必须在样式表中手动将background-color设置为红色，即

.navbar-toggle .icon-bar{
    background-color:red;
}

或者您可以使用内联css，即

<span class="icon-bar red" style="background-color:red"></span>

在Bootstrap中折叠选项卡

1 个答案: