Bootstrap折叠列修复跳转到底部

Question

我正在尝试在灰色正方形上创建一个bootstrap3 collpase（链接“更多”），但是当单击正方形1的折叠时，正方形3会变为4并跳到底部。

在方格2中，似乎效果更好。

错误

确定

<div class="row">
 <div class="col-md-6" style="background-color: red; height: 350px;">
 </div>
 <div class="col-md-6">
   <?php for ($i=0; $i<4; $i++): ?>
     <div class="col-md-6 col-sm-12">
       <div style="background-color: gray; height: 150px;">
         <?= $i +1; ?>
       </div>
       <a class="progress-description" role="button" data-toggle="collapse" href="#collapse<?= $i ?>" aria-expanded="false" aria-controls="collapse<?= $i ?>">More</a>
         <div class="collapse" id="collapse<?= $i ?>">
            <div class="text-justify">
              DESCRIPTION
            </div>
         </div>
       </div>
   <?php endfor; ?>
 </div>

Answer 1

将包含描述块的div循环包装到另一个具有行类的div中。

<div class="row">
// your existing for loop
</div>