bootstrap 3.0按鈕組作為具有折疊數據父項的導航菜單

Question

我想要一個4按鈕菜單。 當按下按鈕時，它不會關閉父級。 我已經嘗試將所有內容都放在一個面板中，但是一個按鈕的寬度超過了100％。 我想將它們排列成一行-另外，我將如何使這個按鈕組共享25％屏幕寬度的每個按鈕的寬度？

這是我嘗試過的。 在此先感謝http://www.bootply.com/Gkouk5MedC

Answer 1

似乎在bootstrap 3.3。*中，此示例http://jsfiddle.net/RfsS9/165/不起作用。 此外，它在我的瀏覽器中也無法啟動。

  <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#

在一行中有多個導航欄的任何其他機會（加上折疊的導航欄中的手風琴？）