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#

在一行中有多个导航栏的任何其他机会（加上折叠的导航栏中的手风琴？）