如何显示评论，例如父评论和子评论

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