1

私はブートストラップの崩壊で遊んでいます。しかし、私は、ブートストラップを折りたたむ方法があるかどうか疑問に思っていますが、2行でも機能します。私はいくつかのことを試しましたが、まだどれもうまくいかないようです。

以下は私が試した1つのことですが、これはうまくいかないようです。一方のアコーディオンタブを開くと、何を試してももう一方は折りたたまれません...

これを解決する方法についてのアイデアや提案はありますか？

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

2 に答える 2

2

私はついに複数列のブートストラップ崩壊の解決策を見つけました。他の誰かが同じ質問をしている場合のために、私は実用的なフィドルを作成します。

<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>
于 2012-12-24T18:57:30.580 に答える
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>

等......

念のために言っておきますが、そのことについては、おそらくそのような重複クラスをネストすることはそれほど素晴らしいことではありません。

于 2013-02-08T13:59:35.033 に答える