html - 如何将这两个 Accordion 内嵌在 Bootstrap 中？

Question

我正在遍历 Bootstrap 的示例:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

现在输出看起来像这样:

Collpasible Item 1#
Collpasible Item 1#

但我希望输出看起来像:

    Collpasible Item 1#  Collpasible Item 2#
    occupy with the reusult of item 1 if 1 is clicked

 Collpasible Item 1#  Collpasible Item 2#
    occupy with the reusult of item 2 if 2 is clicked

添加简单的 inline 无效。

Answer 1

您想使用 Tabs(或 pill)，而不是 Accordion。不要忘记添加所需的 JS 文件。更多:http://twitter.github.io/bootstrap/javascript.html#tabs和 http://twitter.github.io/bootstrap/components.html#navs

来自文档:

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
</div>