Использование загрузочного ремешка для вставки новых строк в разделе комментариев (Python - Django)

Question

Исходный вопрос

Я пытался использовать <div class="row"> после просмотра материала Bootstrap, но комментарии по-прежнему отображались в виде ряда столбцов, а не строк.

<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 et c. На снимке экрана показано, как я хочу разместить комментарии: 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 %}

Answer 1

Вам нужно обернуть ваш код col внутри .row класса. Пример:

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

Answer 2

Я со временем разобрался с ответом и положил его внизу моего исходного поста.

Answer 3

Я думаю, вам, вероятно, нужно сделать следующее:

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