如何显示父评论和儿童评论等评论

Question

我有一个评论表：

如果用户输入评论意味着我想插入值 如果用户点击回复按钮意味着我想在显示像子评论

的同时显示父评论附近的表格

现在我只有html表单。我想获得像this

这样的东西

我的HTML表单

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用此引导元素。

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