使用引导带在注释部分插入新行（Python - Django）答案

【问题标题】：Using Boot Strap To Insert New Rows In Comment Section (Python - Django)使用引导带在注释部分插入新行（Python - Django）
【发布时间】：2020-04-18 05:45:12
【问题描述】：

原始问题

在查看 Bootstrap 材料后，我尝试使用 <div class="row">，但 cmets 似乎仍然呈现在一系列列中，而不是行中。

<article class="media content-section">
        <!-- comments -->
         <h2>{{ comments.count }} Comments</h2>
        {% for comment in comments %}

          <div class="row">
            <div class="media-body ">
                <a class="mr-2" href="#">{{ comment.name }}</a>
                <small class="text-muted">{{ comment.created_on|date:"F d, Y" }}</small>
            </div>

            <p class="article-content">{{ comment.body  }}</p>
          </div>

    {% endfor %}

更新 1

我尝试了 col-md-12 和 col-12，但不幸的是它们都没有成功。

<div class="row">
    <div class="col-md-12">
      <div class="media-body ">
          <a class="mr-2" href="#">{{ comment.name }}</a>
          <small class="text-muted">{{ comment.created_on|date:"F d, Y" }}</small>
      </div>

      <p class="article-content">{{ comment.body  }}</p>
    </div>
  </div>

更新 2

我尝试将 media 和 col 类组合在一起，但没有达到我想要的结果。

  <div class="row">
        <div class="media col-12">
          <div class="media-body ">
              <a class="mr-2" href="#">{{ comment.name }}</a>
              <small class="text-muted">{{ comment.created_on|date:"F d, Y" }}</small>
          </div>

          <p class="article-content">{{ comment.body  }}</p>
        </div>
      </div>

更新 3

我希望每个单独的评论都在自己的行中。就像您在 YouTube、FB、Agoda 等上看到的那样。屏幕截图显示了我希望如何布置 cmets - https://cdn3.f-cdn.com/contestentries/1389606/26048282/5b6c92cc39097_thumb900.jpg.

更新 4

经过几次实验后，我最终使用了这段代码。

<article class="media content-section">
        <!-- comments -->
         <h3>{{ comments.count }} Comments</h3>

  </article>


    <!-- comments -->


    {% for comment in comments %}
    <article class="media content-section">
    <div class="media-body">
        <a class="mr-2" href="#">{{ comment.name }}</a>
        <small class="text-muted">{{ comment.created_on|date:"F d, Y" }}</small>
    <div class="media-body">
      <h2 class="article-title">{{ post.title }}</h2>
    </div>
    <div class="media-body ">
      <p class="article-content">{{ comment.body  }}</p>
    </div>
    </div>

    </article>
    {% endfor %}

【问题讨论】：

图片太多，问题看不懂？？？？并且更新将在问题之后而不是在问题之前进行
请分享你想要的图像和你得到的图像。
我希望每条评论都独占一行。就像您在 YouTube、FB、Agoda 等上看到的那样。屏幕截图显示了我希望如何布置 cmets。
cdn3.f-cdn.com/contestentries/1389606/26048282/…
你的问题解决了吗？

标签： python django bootstrap-4

【解决方案1】：

您需要在 .row 类中使用 col 包装您的代码。示例：

<div class="row">
    <div class="col-12">
        <div class="media-body ">
            <a class="mr-2" href="#">{{ comment.name }}</a>
            <small class="text-muted">{{ comment.created_on|date:"F d, Y" }}</small>
        </div>

        <p class="article-content">{{ comment.body  }}</p>
    </div>
</div>

更多关于网格系统：https://getbootstrap.com/docs/4.1/layout/grid/

【讨论】：

请尝试在col 类附近添加media 类

【解决方案2】：

我认为您可能需要这样做：

<article class="media content-section">
     <!-- comments -->
     <div class="row">
         <h2>{{ comments.count }} Comments</h2>
     <div/>

     <div class="row">
     {% for comment in comments %}
         <div class="row">
             <div class="media-body ">
                 <a class="mr-2" href="#">{{ comment.name }}</a>
                 <small class="text-muted">{{ comment.created_on|date:"F d, Y" }}</small>
             </div>
             <p class="article-content">{{ comment.body  }}</p>
         </div>
    {% endfor %}
    <div/>
<div/>

【讨论】：

【解决方案3】：

我最终想出了答案，并将其放在我原来帖子的底部。

【讨论】：