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#

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

bootstrap 3.0按钮组作为导航菜单，包含折叠数据 - 父

1 个答案: