在 bootstrap col 下打开新的 div

Question

假设我在引导程序中有下表：

当我单击它时，我想在 col 下面打开一个包含更多信息的 div：

这可能与css/javascript有关吗？ 我尝试过Metro Dropdown，但打开的 div 受到 col-3 宽度的限制。 我也尝试在 css 中设置这个 div 的宽度，但我似乎无法达到与附加图像类似的结果。

这种行为的名称是什么？ 这似乎是一个“下拉”，将波纹管组件向下推一点。 我怎么做这样的事情？

Answer 1

正如我上面提到的，您的问题中缺少一些规范。 这是一个尝试。 如果它不合时宜，请用更多细节更新您的问题并发表评论。

 $(document).ready(function() { let counter = 1; $('.container-fluid').fadeIn(); $('.col-12').click(function() { // slide up existing detail row with animation, then remove it $(this).closest('.row').find('.detail').slideUp(400, function() { $(this).remove(); }); // create and append a new row with animation let detailEl = $('<div class="col-12 detail hidden">' + counter + '</div>'); $(this).closest('.row').append(detailEl) detailEl.slideDown(); counter++; }); });

 .row { border-bottom: 2px solid #ddd; } .col-12, .detail { height: 30px; background: pink; } .detail { background: lightgreen; transition: background 1s; } .detail+.detail { background: darkgreen; } .hidden { display: none; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid hidden"> <div class="row"> <div class="col-12"></div> </div> <div class="row"> <div class="col-12"></div> </div> </div>

小提琴演示