Bootstrap水平对齐嵌套手风琴

Question

我试图将两个嵌套的手风琴放在同一行中，这样它们并排出现，占据了父手风琴的一半空间。

HTML：

<div class="panel-group" id="accordion1">
<div class="panel panel-default">
    <div class="panel-heading">
         <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
          Collapsible Group #1
          </a></h4>

    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">This is a simple accordion inner content...</div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
         <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
            Collapsible Group #2 (With nested accordion inside)
          </a></h4>

    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Here we insert another nested accordion -->
            <div class="row">
                <div class="col-md-3">
                    <div class="panel-group sub-panel" id="accordion2">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                 <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                    Collapsible Inner Group Item #1
                  </a></h4>

                            </div>
                            <div id="collapseInnerOne" class="panel-collapse collapse in">
                                <div class="panel-body">Anim pariatur cliche...</div>
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="col-md-6">
                        <div class="panel-group" id="accordion3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                     <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
                    Collapsible Inner Group Item #2
                  </a></h4>

                                </div>
                                <div id="collapseInnerTwo" class="panel-collapse collapse">
                                    <div class="panel-body">Anim pariatur cliche...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Inner accordion ends here -->
                </div>
            </div>
        </div>
    </div>

的CSS：

.panel-heading {
background: #00BFFF !important;
text-align: center;
}
#accordion3 {
float: right;
}
.sub-panel {
display: inline;
}

这是一个JS小提琴的链接：http://jsfiddle.net/tdcqgo4k/

我尝试使用.row .row-fluid与.span *以及尝试使用col- - 类。请帮忙！

Answer 1

从第三个手风琴的CSS中删除float，并将列定义更改为使用col-xs-6作为嵌套手风琴的列父母

Demo Fiddle

HTML

<div class="panel-group" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
              Collapsible Group #1
              </a></h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">This is a simple accordion inner content...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                Collapsible Group #2 (With nested accordion inside)
              </a></h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <!-- Here we insert another nested accordion -->
                <div class="row">
                    <div class="col-xs-6">
                        <div class="panel-group sub-panel" id="accordion2">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                     <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                        Collapsible Inner Group Item #1
                      </a></h4>

                                </div>
                                <div id="collapseInnerOne" class="panel-collapse collapse in">
                                    <div class="panel-body">Anim pariatur cliche...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel-group" id="accordion3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                     <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
                        Collapsible Inner Group Item #2
                      </a></h4>

                                </div>
                                <div id="collapseInnerTwo" class="panel-collapse collapse">
                                    <div class="panel-body">Anim pariatur cliche...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Inner accordion ends here -->
                </div>
            </div>
        </div>
    </div>

CSS

.panel-heading {
    background: #00BFFF !important;
    text-align: center;
}