Bootstrap Collapse Column 修复跳转到底部

Posted 2023-03-24

【中文标题】Bootstrap Collapse Column 修复跳转到底部

【英文标题】：Bootstrap Collapse Column fix Jump to Bottom

【发布时间】：2020-05-03 20:17:23

【问题描述】：

我正在尝试在灰色方块上进行 bootstrap3 折叠（链接“更多”），但是当单击方块 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>

【问题讨论】：

将 col-sm-12 更改为 col-md-12。

@RohanRao 不工作，发生同样的情况

col-lg-12 怎么样？

@RohanRao 发生这种情况，i.ibb.co/tQw6fkK/Sem-T-tulo3.png（请参阅链接），但这不是故意的。

嗯。在这种情况下，for 循环可能不起作用。您需要在第二列中取两行才能达到预期的结果。

【参考方案1】：

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

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

【讨论】：

不工作，结果和我上面回答的差不多。