bootstrap手风琴菜单固定在底部 - 最高的菜单高度移动其他菜单

Question

<!--        Bottom Row-->
<div class="bottom-row">
    <!--First Accordion-->
    <div class="panel-group col-xs-6" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading gold" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
                <h4 class="panel-title">
                        <a class="accordion-toggle">
                            first one
                        </a>
                    </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>Stuff</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading gold">
                <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
                        <a class="accordion-toggle">
                            Stuff3
                        </a>
                    </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>More stuff</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading gold">
                <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
                        <a class="accordion-toggle">
                            Even more stuff
                        </a>
                    </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>Stuff99</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading blue">
                <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapseFour">
                        <a class="accordion-toggle">
4th entry
                        </a>
                    </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>Other stuff</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End of first accordion-->






    <!--            Start of second accordion-->
    <div class="panel-group col-xs-6" id="accordion2">
        <div class="panel panel-default">
            <div class="panel-heading gold" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseOne2">
                <h4 class="panel-title">
                        <a class="accordion-toggle">
                        Collapsible Group Item #1
                        </a>
                    </h4>
            </div>
            <div id="collapseOne2" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>VHS.</li>
                        <li>VHS.</li>
                        <li>VHS.</li>
                        <li>VHS.</li>
                        <li>VHS.</li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwo2">
                        <a class="accordion-toggle">
                        Collapsible Group Item #2
                        </a>
                    </h4>
            </div>
            <div id="collapseTwo2" class="panel-collapse collapse">
                <div class="panel-body">
                    VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseThree2">
                        <a class="accordion-toggle">
                        Collapsible#3
                        </a>
                    </h4>
            </div>
            <div id="collapseThree2" class="panel-collapse collapse">
                <div class="panel-body">
                    VHS.
                </div>
            </div>
        </div>
    </div>
    <!--            End of second Accordion-->





</div>
<!-- /.bottom-row -->

和CSS：     .bottom-row {         底部：0px;         位置：绝对;         宽度：100％;     }

尝试引导以前的网站并模仿其功能，但遇到问题。 当尝试将一排手风琴菜单固定在页面底部时，每个菜单在加载时浮动到最高菜单的顶部，并在另一个菜单改变高度时移动位置。

我希望每个菜单的底部都能留在那里，无论其邻居在做什么。如果我尝试将它们单独固定在底部，它们似乎找不到底部。

如果粘贴页脚是答案，我不确定如何实现它。

谢谢！

https://jsfiddle.net/CarnivorousRex/whzgw1rk/