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

小提琴演示