Bootstrap сетки неупорядоченных когда настроить страницу

Question

Вместо того, выложив в парах 2, он пропускает:

Мой код для сетки является относительно простой и единственный стиль, который я сам сделал, чтобы настроить маржа, остальное от начальной загрузки и трудно найти:

.thumbnail { 
 
    margin-left: 3%; 
 
    margin-right: 3%; 
 
    margin bottom : 10%; 
 
}

{% extends "layout.html" %} 
 

 
{% block title %} 
 
    {{city[0]["name"]}} 
 
{% endblock %} 
 

 
{% block main %} 
 
    <div id = "city_title"> 
 
     <h3>{{city[0]["name"]}}</h3> 
 
    </div> 
 
    
 
    
 
    <!-- Page Content --> 
 
    <div class= container-fluid> 
 

 
     <div class="row"> 
 
      {% for i in range(num_items) %} 
 
      <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
       <a class="thumbnail" href="#"> 
 
        <img class="img-responsive" src="{{ url_for('static', filename = file_names[i]) }}" alt=""> 
 
       </a> 
 
      </div> 
 
      {% endfor %} 
 
      <div class="col-lg-3 col-sm-4 col-xs-6 thumb"> 
 
       <a class="thumbnail" href="#"> 
 
        <img class="img-responsive" src="{{ url_for('static', filename='img/bucketlist.jpg') }}" alt=""> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
 
       <a class="thumbnail" href="#"> 
 
        <img class="img-responsive" src="{{ url_for('static', filename='img/oddsends.jpg') }}" alt=""> 
 
       </a> 
 
      </div> 
 

 
     </div> 
 

 
     <hr> 
 

 
{% endblock %}

Answer 1

Paste clearfix'ed DIV после каждого второго DIV:

<div class="clearfix visible-xs-block"></div> 

после каждого 3-ий:

class="clearfix visible-md-block" 

после каждого 4-ого:

class="clearfix visible-lg-block" 

Результат должен быть, как:

{% extends "layout.html" %} 

{% block title %} 
    {{city[0]["name"]}} 
{% endblock %} 

{% block main %} 
    <div id = "city_title"> 
     <h3>{{city[0]["name"]}}</h3> 
    </div> 


    <!-- Page Content --> 
    <div class= container-fluid> 

     <div class="row"> 
      {% for i in range(num_items) %} 
      <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="{{ url_for('static', filename = file_names[i]) }}" alt=""> 
       </a> 
      </div> 
      {% if i/2 == 0 %} 
       <div class="clearfix visible-xs-block"></div> 
      {% endif %} 
      {% if i/3 == 0 %} 
       <div class="clearfix visible-md-block"></div> 
      {% endif %} 
      {% if i/4 == 0 %} 
       <div class="clearfix visible-lg-block"></div> 
      {% endif %} 
      {% endfor %} 
      <div class="col-lg-3 col-sm-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="{{ url_for('static', filename='img/bucketlist.jpg') }}" alt=""> 
       </a> 
      </div> 
      <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="{{ url_for('static', filename='img/oddsends.jpg') }}" alt=""> 
       </a> 
      </div> 
     </div> 
     <hr> 
{% endblock %} 

или вы можете отменить o r уменьшает размер поля для крошечных видовых экранов:

@media screen and (max-width: 768px) { 
    .thumbnail { 
     margin-left: 0; 
     margin-right: 0; 
    } 
}