ブートストラップ3.0ボタングループとしての折りたたみデータ付き親メニュー

Question

4ボタンメニューがあります。ボタンを押すと親を閉じることはありません。私はすでに1つのパネルにすべてを入れようとしましたが、1つのボタンで100％幅以上になりました。そして、私はそれらを1行にまとめたいと思っています。 また、このボタングループを画面幅の25％の各ボタンの幅を共有するにはどうすればいいですか？

これは私が試したものです。ありがとうございます http://www.bootply.com/Gkouk5MedC

Answer 1

ブートストラップ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#

任意OT 1行に複数のナビゲーションバーを表示するチャンスです（折り畳まれたナビバーのアコーディオンに加えて）