html - Bootstrap 帮助 - 尝试使用 list-group-item 创建一个 2 列表

Question

初学者编码器请求一些关于 bootstrap4 的帮助。

我正在尝试创建一个列表组元素来显示用户评论。 enter image description here

我已经尝试修补所有我能想到的东西。

从表面上看，它似乎应该非常简单，但我很难过。

想知道您的想法吗？我是否需要特定的 CSS 才能做到这一点？

<div class="panel-heading">
    <div class="panel-body">
    <div class="list-group">
    {% if comments %}
    {% for comment in comments %}
    <div class="list-group-item ">
    <!--left hand side of table to store username, userstatus and userimage -->
        <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2 col-xl-2">
        <div class="col-lg-12" align="center">
        <p><a href="{% url 'profile' comment.user %}">{{ comment.user }}</a></p>
        </div>
            <div class="col-lg-12" align="center">
            <p class="status">({{ comment.user.status }})</p>
            </div>
            <div>
            <img class="rounded mx-auto d-block" width="64" height="64" src="{{ MEDIA_URL}}{{ comment.user.picture }}"/><p>
            </div>
        </div>
        <!--right hand side of table to store date comment posted and comment -->
        <div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 col-xl-8">
            <div class="col-lg-12" align="left">
        <p>Posted: {{ comment.created}}</p>
        </div>          
        <div>
        <p>{{comment.body}}</p>
        </div>
        </div>
        </div>
        {% endfor %}
        {% else %}
        <p>There are no comments</p>
        {% endif %}
    </div>
  </div>
</div>

Answer 1

Bootstrap 现在建议您使用他们的 Cards 内容容器而不是使用面板。要将某些元素保持在同一行，您应该将这些元素保持在同一行。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-sm-2">
        <a href="#">0808148w</a>
      </div>
      <div class="col-sm-10">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <p class="status">Current student</p>
      </div>
      <div class="col-sm-10">
        <p>Posted: 20/03/2019</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <img class="rounded d-block" width="64" height="64" src="https://picsum.photos/64/?random" />
      </div>
      <div class="col-sm-10 card-text">
        Comments...
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-sm-2">
        <a href="#">0808148w</a>
      </div>
      <div class="col-sm-10">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <p class="status">Current student</p>
      </div>
      <div class="col-sm-10">
        <p>Posted: 21/03/2019</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <img class="rounded d-block" width="64" height="64" src="https://picsum.photos/64/?random" />
      </div>
      <div class="col-sm-10 card-text">
        Comments...
      </div>
    </div>
  </div>
</div>