Я хочу отобразить список с помощью «складных 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>