Шопфий - Жидкость - Bootstrap

Question

Может кто-нибудь понять, почему нужно получить только один столбец, хотя я использую класс col-md-6?

div class="container">
{% for member in section.blocks %}
 <div class="row">
  <div class="col-lg-6 col-md-6">
    {% if member.settings.photo %}
    {{member.settings.photo | img_url: '300x' | img_tag }}   
    {%  endif %}
    <h3>{{ member.settings.name }}</h3>
    <span>{{ member.settings.title }}</span>
    <p>{{ member.settings.bio }}</p>
  </div>
   </div>
  {% endfor %}
</div>

Снимок экрана

Answer 1

Потому что каждая ваша строка содержит только один столбец. Чтобы это исправить, вы должны вывести 2 столбца в каждой строке. Для этого вы можете использовать условные операторы, как показано ниже

<div class="container">
<div class="row"> <!-- opening row, outside loop -->
{% for member in section.blocks %}
 {% assign remainder = forloop.index0 | modulo:2 %}
 <!-- condition to close previous row div and open new one  -->
 {% if forloop.index0 !=0 AND remainder == 0 %}
     </div><div class="row">
 {% endif %}
  <div class="col-lg-6 col-md-6">
    {% if member.settings.photo %}
    {{member.settings.photo | img_url: '300x' | img_tag }}   
    {%  endif %}
    <h3>{{ member.settings.name }}</h3>
    <span>{{ member.settings.title }}</span>
    <p>{{ member.settings.bio }}</p>
  </div>
   </div>
  {% endfor %}
</div> <!-- closing row , opened outside loop-->
</div>

. Этот код выводит два столбца в каждой строке. Проверьте комментарии кода для деталей.