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>

引导程序协助-尝试使用list-group-item创建2列表

1 个答案: