引導電網無序時而是調整對2佈局的

Question

頁

，它是跳繩：

我網格代碼是相對簡單和唯一的造型，我自己做的是調整邊緣，剩下的就是從引導，很難找到：

.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

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

每個第三一個後：

class="clearfix visible-md-block" 

每第四一個後：

class="clearfix visible-lg-block" 

結果必須是這樣的：粘貼每個第二格以後clearfix'ed DIV

{% 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 %} 

或撤銷Ø r減少小視口的邊距：

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