引導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她的機會，在一行中的多個導航欄（加上手風琴在倒塌導航欄？）