Как правильно выровнять несколько складных панелей Bootstrap? - PullRequest
Новая
       20

Как правильно выровнять несколько складных панелей Bootstrap?

0 голосов
/ 04 февраля 2020

Я хочу отобразить список с помощью «складных bootstrap панелей», но я замечаю, что при открытии некоторых панелей они не выравниваются должным образом.

Например, когда я открываю первую панель в коде, все остальные панели переместиться под другую панель под второй панелью.

Я хочу, чтобы панели 3 и 4 оставались на своих местах в своей сетке при открытии панели 1.

Что я делаю не так? 

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

1 Ответ

1 голос
/ 04 февраля 2020 
**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>
...