两列手风琴与Bootstrap

时间：2014-09-02 21:57:25

标签： jquery twitter-bootstrap

我使用Bootstrap，在设计中，我们有一个两个col手风琴部分，一次只能有一个活动的下拉状态。

我在点击下拉菜单后遇到了维护cols的问题。左侧的元素在扩展部分下方向右移动。

请参阅示例：Bootply

代码：

<div class="col-xs-11 col-sm-7">
<div class="panel-group" id="accordion">


    <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne1">
            TEST1
        </a>
      </h4>
    </div>
    <div id="collapseOne1" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTEST     
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo2">
TEST 2       </a>
      </h4>
    </div>
    <div id="collapseTwo2" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST        
      </div>
    </div>
  </div>



  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree3">
TEST3        </a>
      </h4>
    </div>
    <div id="collapseThree3" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST       
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour4">
TEST   4     </a>
      </h4>
    </div>
    <div id="collapseFour4" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST       
      </div>
    </div>
  </div>






  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive5">
TEST  5      </a>
      </h4>
    </div>
    <div id="collapseFive5" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST        
      </div>
    </div>
  </div>



  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSix6">
TEST    6    </a>
      </h4>
    </div>
    <div id="collapseSix6" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST       
      </div>
    </div>
  </div>

  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
TEST  7      </a>
      </h4>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST   
      </div>
    </div>
  </div>


  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
TEST  8      </a>
      </h4>
    </div>
    <div id="collapseEight" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">
TEST  9      </a>
      </h4>
    </div>
    <div id="collapseNine" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST       
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTen">
TEST     10   </a>
      </h4>
    </div>
    <div id="collapseTen" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST      
      </div>
    </div>
  </div>






  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">
TEST  11      </a>
      </h4>
    </div>
    <div id="collapseEleven" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST       
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve">
TEST    12    </a>
      </h4>
    </div>
    <div id="collapseTwelve" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTEST      
      </div>
    </div>
  </div>



</div>
</div>

感谢任何帮助！

1 个答案:

答案 0 :(得分：1)

不是在每个面板周围添加col-sm-6，而是将双方分组在他们自己的div中并添加＆＃39; col-sm-6＆＃39;每个小组

示例：http://www.bootply.com/vfbv3Cnn6v 

<div class="col-xs-11 col-sm-7">
    <div class="panel-group" id="accordion">

        <!-- start panel left -->
        <div class="panel-left col-sm-6">
            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_1">
                        TEST_1
                     </a>
                    </h4>
                </div>
                <div id="TEST_1" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_2">
                        TEST_2
                     </a>
                    </h4>
                </div>
                <div id="TEST_2" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_3">
                        TEST_3
                     </a>
                    </h4>
                </div>
                <div id="TEST_3" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_4">
                        TEST_4
                     </a>
                    </h4>
                </div>
                <div id="TEST_4" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_5">
                        TEST_5
                     </a>
                    </h4>
                </div>
                <div id="TEST_5" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_6">
                        TEST_6
                     </a>
                    </h4>
                </div>
                <div id="TEST_6" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->




        </div> 
        <!-- end panel left -->


        <!-- start panel right -->
        <div class="panel-left col-sm-6">
            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_7">
                        TEST_7
                     </a>
                    </h4>
                </div>
                <div id="TEST_7" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_8">
                        TEST_8
                     </a>
                    </h4>
                </div>
                <div id="TEST_8" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_9">
                        TEST_9
                     </a>
                    </h4>
                </div>
                <div id="TEST_9" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_10">
                        TEST_10
                     </a>
                    </h4>
                </div>
                <div id="TEST_10" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_11">
                        TEST_11
                     </a>
                    </h4>
                </div>
                <div id="TEST_11" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_12">
                        TEST_12
                     </a>
                    </h4>
                </div>
                <div id="TEST_12" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->




        </div> 
        <!-- end panel right -->




    </div>
</div>

此外，我发现当我有大量嵌套div时，添加注释以显示重要区域的打开和关闭位置非常方便。

所以为了让手风琴仍然尊重开启和关闭引导程序文档说有一个事件show.bs.collapse在显示一个面板时触发，所以使用它然后隐藏哪个面板有类{{1} （这表示打开的面板）

in
相关问题
最新问题