Css 如何很好地对齐我的多个可折叠引导面板？

我想通过“可折叠引导面板”显示列表，但我注意到当我打开某些面板时，它们没有正确对齐

例如，当我打开代码中的第一个面板时，所有其他面板在第二个面板下相互移动

当我打开面板1时，我希望面板3和4保持在其网格中的位置

我做错了什么

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div>
                <a
                    href="#panel1"
                    class="btn btn-info"
                    data-toggle="collapse">Panel 1</a>
            </div>
            <div
                id="panel1"
                class="collapse">

                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Praesent scelerisque, neque sit amet aliquam pulvinar, metus
                        arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
                        imperdiet dolor vitae lorem efficitur, non tincidunt nisi
                        accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
                        tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
                        rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
                        nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit. Nam sagittis augue vitae iaculis
                        lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
                        lectus. Ut eu consequat arcu, a porttitor magna.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div>
                <a
                    href="#panel2"
                    class="btn btn-info"
                    data-toggle="collapse">Panel 2</a>
            </div>
            <div
                id="panel2"
                class="collapse">

                <div>
                    <p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
                        felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
                        vitae suscipit orci. Nam dignissim a purus vitae efficitur.
                        Pellentesque habitant morbi tristique senectus et netus et
                        malesuada fames ac turpis egestas. Nam libero augue,
                        scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
                        ipsum primis in faucibus orci luctus et ultrices posuere
                        cubilia Curae; Ut luctus molestie lectus, ac dictum sem tempor
                        id.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div>
                <a
                    href="#panel3"
                    class="btn btn-info"
                    data-toggle="collapse">Panel 3</a>
            </div>
            <div
                id="panel3"
                class="collapse">

                <div>
                    <p>Aliquam sit amet convallis nulla, quis dapibus elit. Aliquam
                        nisl justo, mollis et pulvinar ut, laoreet eu enim. Quisque
                        maximus scelerisque dui, aliquam posuere dolor consequat ut.
                        Nullam semper dictum urna et auctor. Donec lacus risus,
                        sagittis at vestibulum ac, dictum vitae mauris. Duis non velit
                        congue diam vulputate auctor a et libero. Duis a tortor
                        lobortis, suscipit orci eu, facilisis eros. Proin et faucibus
                        tortor, in finibus elit. Morbi suscipit porttitor justo
                        interdum euismod. In posuere leo velit, non egestas tortor
                        malesuada sit amet. Phasellus malesuada ultricies massa eget
                        volutpat.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div>
                <a
                    href="#panel4"
                    class="btn btn-info"
                    data-toggle="collapse">Panel 4</a>
            </div>
            <div
                id="panel4"
                class="collapse">
                <div>
                    <p>Cras interdum dui sit amet nisi porttitor, iaculis cursus
                        tellus tincidunt. Praesent iaculis eget ipsum sed condimentum.
                        Fusce aliquam ipsum mauris. Donec laoreet dapibus efficitur.
                        Quisque in rhoncus dolor. Aliquam erat volutpat. Quisque eget
                        quam sed velit ultrices pellentesque. Vivamus neque arcu,
                        vestibulum in neque a, tincidunt sagittis lectus. Nullam nisi
                        nulla, semper non maximus sed, rutrum vel velit.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。
帕雷森特·塞勒里斯，内克·塞特·阿利夸姆·普尔维纳尔，梅特斯
arcu commodo sem，我的蜗壳是空的。脯氨酸
不含酒精，不含酒精，不含酒精
accumsan。Nam调味品拍卖行tincidunt。Fusce-eget
坦普斯·维利特，在维利特门。同侧额额额。Nunc
金樱子。悬粒直径扫描电镜，分子筛
nisl id，你是自由人。Lorem ipsum dolor sit amet，
献祭精英。Nam sagittis augue vitae iaculis
拉齐尼亚。我爱你，我爱你，我爱你，我爱你
莱克托斯。Ut eu consequat arcu，一个港口巨头。

在不安全的情况下，安全地坐着
菲利斯。红菱前前庭。等分
苏西皮特奥奇生活酒店。不，我是一个有效率的人。
佩伦特式居住者morbi tristique Sentecus et netus et
malesuada是著名的ac turpis egestas。南自由奥古斯，
权杖是我们的，权杖是我们的。前庭前庭
福西布斯奥奇卢库斯和乌尔特里斯波苏尔的益普生
库里亚；luctus molectie lectus，ac dictum sem tempor
身份证件

阿美·康瓦利斯·努拉（amet convallis nulla）坐在那里，他是一位精英。等分
nisl justo，mollis et pulvinar ut，laoreet eu enim。奎斯克
马克西姆斯·斯克利斯·杜伊，阿利奎姆·波苏尔·多洛·康斯奎特。
这句话的意思是：“没有人知道。”。Donec lacus risus，
前庭矢状体ac，主脉mauris。杜伊斯·诺维利特
一名自由拍卖人。被告是侵权人
lobortis，suscipit orci eu，facilisis eros。普罗因福西布斯酒店
托托，在菲尼布斯精英。莫比·苏西皮特·波尔蒂托·胡斯托
伊特杜姆·尤伊斯莫。在posuere leo velit中，非埃古斯塔侵权人
马莱苏亚达坐在阿梅特。马利苏达乌尔特里斯马萨埃杰酒店
帕特。

我坐在门前的中间，我的手在弯曲
泰勒斯·汀西登。Praesent iaculis eget ipsum sed调味品。
同侧毛鳞茎。Donec laoreet dapibus效率。
朗卡斯·多洛的奎斯克。阿利奎姆·埃拉特·帕特。奎斯克·埃吉特
这是一个非常好的例子。内克阿库万岁，
内克a的前庭，矢状指侧。努拉姆尼西
无尾、无尾、芦丁。

**使用此**
面板1代码
面板2代码
面板3代码
面板4代码

如果您希望与panel2的行为相同，那么我的答案将解决您的问题。首先，您使用的是

col

无

row

包装器，如上图所示，一行中有4个

col

6个，这是不可能的，因为行必须有12个网格，而不是更多。第二，只需制作2个

col

并将手风琴放在里面……在您的特定场景中，使用来实现此布局是的，效果很好。但我的资料来源是一个包含大量项目的列表，这些行似乎是硬编码的。仅使用1行元素是否可行？@Malin如果您希望使用与您编写的相同的UI，则必须编写脚本，否则我们必须固定内容的高度（如果内容超过高度，则您将获得内容的滚动条）

**Tyr With this**
<div class="container">
   <div class="row">
      <div class="col-xs-6">
         panel1 Code
      </div>
      <div class="col-xs-6">
         panel2 Code
      </div>
   </div>
   <div class="row">
      <div class="col-xs-6">
         panel3 Code
      </div>
      <div class="col-xs-6">
         panel4 Code
      </div>
   </div>
</div>