引导3.0按钮组作为导航菜单与崩溃数据亲 -

Question

我想有一个4按钮菜单。当按下按钮时，它不会关闭父项。我已经试过把所有的面板都放在一个面板上，但是只要一个按钮就可以使其宽度达到100％。我想将它们排列在一行中 - 另外，如何使此按钮组分享每个按钮的宽度，使其达到屏幕宽度的25％？

这是我试过的。在此先感谢 http://www.bootply.com/Gkouk5MedC

Answer 1

它似乎在bootstrap 3.3。*此示例http://jsfiddle.net/RfsS9/165/将无法​​正常工作。除此之外，它在我的浏览器中都无法在bootply中运行。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 

切换导航 切换导航

<a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
      Collapsible Group 1</a> 
      </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse in"> 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
      commodo consequat.</div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
      Collapsible Group 2</a> 
      </h4> 
     </div> 
     <div id="collapse2" class="panel-collapse collapse"> 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
      commodo consequat.</div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> 
      Collapsible Group 3</a> 
      </h4> 
     </div> 
     <div id="collapse3" class="panel-collapse collapse"> 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
      commodo consequat.</div> 
     </div> 
     </div> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
    <div id="test2" class="nav-search collapse"> 
      <div class="search_box"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">message 1</a></li> 
       <li><a href="#">message 1</a></li> 
       <li><a href="#">message 1</a></li> 
       <li><a href="#">message 1</a></li> 
     </ul> 
    </div><!--/.nav-search --> 
</div><!-- /.container-fluid --> 

http://www.bootply.com/oGlDWCaSxx#

任何OT她的机会，在一行中的多个导航栏（加上手风琴在倒塌导航栏？）