html - 如何将这两个手风琴内联放在引导程序中？

Question

我正在浏览引导程序的示例：

<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（或药丸），而不是 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>

Answer 2

利用引导类

用一行包裹你的手风琴代码，并用 span6 包裹你的手风琴组。这边走：

<div class="row">
<div class="accordion">

<div class="span6">
    <div class="accordion-group">
        ...
    </div>
</div>

<div class="span6">
    <div class="accordion-group">
        ...
    </div>
</div>

</div><!-- closes .accordion-->
</div><!-- closes .row-->

然后您可以覆盖 css 以删除不需要的边距和填充。告诉我这是否是您展示手风琴的方式。

Answer 3

我想我可能有一个外部解决方案，可以为您提供所需的功能。它使用 jQuery UI 而不是 Bootstrap。您可能会发现它更容易使用。

一定要检查 fiddle 有很多 css

jsFiddle

html

<h6 id="click1">Click Me!</h6>

    <div>some content</div>

<h6 id="click2">Click Me Too!</h6>

    <div>some more content</div>
     <h6 id="click3">Click Me Three!</h6>

    <div>wait, there's more content!</div>
</div>

js

$(function () {
    $(".accordion").show().accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        animate: {
            duration: 1000,
            easing: 'easeOutBounce'
        }
    });
});