DEMO

Question

我正在使用两个或更多不同的菜单，我遇到的问题是，第二次崩溃打开以及向下切换？

这是HTML

<footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#" data-toggle="collapse" data-target=".navbar-collapse-second">Brand</a>
        <button type="button" class="navbar-toggle overlay-display" 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">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
       <div class="navbar-collapse-second collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
      <div class="container-fluid" style="background-color:red;">
        <div class="row">
          <div class="col-md-12"> COPYRIGHT </div>
        </div>
      </div>
    </nav>
  </footer>

这是CSS

            footer > nav > div.navbar-header {
    float: none;
}
footer > nav > div.navbar-header > button {
    display: block;
}
footer > nav > div.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
footer > nav > div.navbar-collapse.collapse {
    display: none!important;
}
footer > nav > div.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
footer > nav > div.navbar-nav>li {
    float: none;
}
footer > nav > div..navbar-nav>li>a {
 padding-top: 10px;
 padding-bottom: 10px;
}

我可以在崩溃时添加几个按钮吗？

这是工作小提琴 http://jsfiddle.net/h2scz3q5/

尝试点击bootom导航，顶部导航打开bootom，当尝试点击bootom中的品牌时，发生了一些紧张情况，首先在bootom崩溃没有关闭？

Answer 1

提供唯一目标

按钮

<button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

目标div

 <div class="navbar-collapse1 collapse">

HTML：

<footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#" data-toggle="collapse" data-target=".navbar-collapse-second">Brand</a>
        <button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      </div>
      <div class="navbar-collapse1 collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
       <div class="navbar-collapse-second collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
      <div class="container-fluid" style="background-color:red;">
        <div class="row">
          <div class="col-md-12"> COPYRIGHT </div>
        </div>
      </div>
    </nav>
  </footer>

在bootstrap中添加不同的折叠菜单3

1 个答案:

DEMO