Question

我的bootstrap导航栏中的折叠按钮无效，我不知道为什么。有人可以帮我解决这个问题吗？

这是我的导航栏：

<div id="wrapper">
    <div class="navbar navbar-inverse navbar-fixed-top ">
        <div id="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="brand" class="navbar-brand">TEST</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul id="listleft" class="nav navbar-nav navbar-left">
                    <li class="active"><a  href="#Home">Home</a></li>
                    <li><a href="#About">About</a></li>
                </ul>
                <ul id="listright" class="nav navbar-nav navbar-right">
                    <li><a href="#Contact">Contact</a></li>
                    <li><a href="#Blog">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>

Navbar CSS：

.navbar-brand,
.navbar-nav li a {
line-height: 70px;
height: 70px;
padding-top: 0;
}
#brand{
font-size: 500%;
color:#FFFFFF;
}
.navbar-brand{
position:absolute; 
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 23%;
}
#listright{
margin-right: 20%;
}
ul li{
font-size: 180%;
}
#wrapper{
height: 100%;
}

Answer 1

您在正确的引导程序格式中遇到了一些小错误，这会影响菜单的按钮切换。

在此处阅读有关正确格式化引导程序导航栏的更多信息

http://getbootstrap.com/components/#navbar

HTML：

 <div class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">

        <div class="navbar-header pull-left">     
          <a id="brand" class="navbar-brand">TEST</a>
        </div>
        <div class="navbar-header pull-right">
           <button type="button" class="navbar-toggle" 
                  data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button> 
        </div>

        <div class="navbar-collapse collapse">
           <ul id="listleft" class="nav navbar-nav navbar-left">
                    <li class="active"><a  href="#Home">Home</a></li>
                    <li><a href="#About">About</a></li>
                </ul>
                <ul id="listright" class="nav navbar-nav navbar-right">
                    <li><a href="#Contact">Contact</a></li>
                    <li><a href="#Blog">Blog</a></li>
                </ul>
        </div>

    </div>
  </div>

CSS：

.navbar-brand,
.navbar-nav li a {
line-height: 70px;
height: 70px;
padding-top: 0;
}
#brand{
font-size: 500%;
color:#FFFFFF;
}
.navbar-brand{
position:absolute; 
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 23%;
}
#listright{
margin-right: 20%;
}
ul li{
font-size: 180%;
}
#wrapper{
height: 100%;
}

CODEPEN DEMO

任何人都可以告诉我为什么我的Bootstrap折叠按钮不起作用？

1 个答案: