如何顯示評論，例如父評論和子評論

Question

我有一個評論表格：

如果用戶輸入評論意味着我要插入值（如果用戶單擊回復按鈕）意味着我想在顯示類似子評論的同時在父評論附近顯示該表單

現在我只有html形式。 我想獲得像這樣

我的HTML表單

 <div class="post-block post-comments clearfix" style="margin:10px"> <h3 class="heading-primary comments"><i class="fa fa-comments"></i>Comments (10)</h3> <form method="POST" id="commentForm" novalidate="novalidate"> <div class="row"> <div class="form-group"> <div class="col-md-6"> <label>Your name *</label> <input type="text" required="" id="name" name="name" class="form-control" maxlength="100" data-msg-required="Please enter your name." value="" aria-required="true"> </div> <div class="col-md-6"> <label>Your email address </label> <input type="email" id="email" name="email" class="form-control" maxlength="100" data-msg-email="Please enter a valid email address." data-msg-required="Please enter your email address." value="" aria-required="true"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>Comment *</label> <textarea required="" id="message" name="message" class="form-control" rows="5" data-msg-required="Please enter your comment." maxlength="5000" aria-required="true" placeholder="Enter comment here"></textarea> </div> </div> </div> <div class="row" style="margin-top:10px"> <div class="col-md-12"> <input type="submit" data-loading-text="Loading..." class="btn btn-primary btn-lg mb-xlg" id="post-comment" value="Post Comment"> </div> </div> </form> <ul class="comments"> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim ornare nisi, vitae mattis nulla ante id dui.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> <ul class="comments reply"> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>John Doe</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user3-128x128.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>John Doe</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> </ul> </li> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user3-128x128.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> </ul> </div> 

Answer 1

您可以使用此引導元素。

http://getbootstrap.com/components/#media