引导折叠两行答案

【问题标题】：bootstrap collapse two rows引导折叠两行
【发布时间】：2012-12-11 01:10:26
【问题描述】：

我正在玩引导崩溃。但是我想知道是否有办法让引导程序崩溃也可以在两行中工作。我尝试了几件事，但似乎没有一个对我有用。

下面是我尝试过的一件事，但这似乎不起作用。打开一个手风琴选项卡时，无论我尝试什么，另一个都不会折叠...

关于如何解决这个问题的任何想法或建议？

<div class="row-fluid">
    <div class="accordion" id="accordion2">

        <div class="span6">

          <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>

        <div class="span6">

          <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>

    </div>
</div>

【问题讨论】：

标签： twitter-bootstrap rows collapse

【解决方案1】：

我终于找到了多列引导崩溃的解决方案。我将创建一个有效的fiddle，因为如果有人问过同样的问题。

<div class="row-fluid" id="accordion2" >

    <div class="span6" id="accordion2">

        <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    collapse 1
              </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                    collapse item 1
              </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                    collapse 2
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                    collapse item 2
              </div>
            </div>
        </div>

    </div>

    <div class="span6" id="accordion2">

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                    Collapse 3
                </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                    Collapse item 3
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                    Collapse 4
                </a>
            </div>
            <div id="collapseFour" class="accordion-body collapse">
                <div class="accordion-inner">
                    Collapse item 4
                </div>
            </div>
        </div>

    </div>

</div>

【讨论】：

小提琴坏了可能是因为它链接到引导程序 3。这是一个导入 BS 2.3.2 的新小提琴：jsfiddle.net/LmeSL/5

【解决方案2】：

编辑：抱歉，此代码指的是下面的示例。恐怕是 SOF 的新手

这很好，但很调皮，有多个 ID！

试试：

<div class="row-fluid accordion2" >

<div class="span6 accordion2">

<div class="accordion-group">

  <div class="accordion-heading">
   <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion2" href="#collapseOne">
    collapse 1
   </a>
  </div>

  <div id="collapseOne" class="accordion-body collapse in">
   <div class="accordion-inner">
    collapse item 1
   </div>
  </div>

</div>

等等……

请注意，就这一点而言，嵌套这样的重复类可能也不是很好。

【讨论】：