Django Bootstrap Gridすべてのコンテンツが改行して新しい行に移動します

Question

Djangoフレームワークを使用してWebサイトを構築しています（1行に3つのグリッドが表示されます）が、下のコードはすべての場所がカラム。私のブラウザで

<div class="site-container container-fluid">   
    <div class="row">    
     <div class="col-md-3 col-lg-2"> 
     <div class="thumbnail">      
      <a href="{% url 'sites:details' site.id %}"> 
       <img src="{{ site.site_picture}}" class="img-responsive"> 
      </a>   
      <div class="caption"> 
       <h2>{{ site.site_name }}</h2> 
       <h4>{{ site.site_street }}</h4> 


       <!-- View Details --> 
       <a href="{% url 'sites:details' site.id %}" class="btn btn-primary btn-sm" role="button">View Details&nbsp;<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> 

      </div> 
     </div> 
     </div> 
    </div> 
</div> 

しかし私は、すべてのサイトが、私はそれが3の行であることと、新しい行に分割し、その後、別のを開始したいのに対し、列に新しい行にある私が欲しいコンテンツを見ます3行

Screenshot

Answer 1

は、私はあなたが見ていますブラウザこれらの要素の一つだけを調べる場合は、

<div class="col-md-3 col-lg-2"> 

内のすべてを実行しているので、それがあると思いますか？もしそうなら、それはあなたの問題でしょう。何が欲しいのはあなたがそれぞれ独自のコンテンツを保持する複数の列を取得する方法何かのように、

<div class="site-container container-fluid">   
<div class="row"> 
    LOOP OUTSIDE OF HERE!!!!!!!! <--------------------- 
    <div class="col-md-3 col-lg-2"> 
    <div class="thumbnail">      
     <a href="{% url 'sites:details' site.id %}"> 
      <img src="{{ site.site_picture}}" class="img-responsive"> 
     </a>   
     <div class="caption"> 
      <h2>{{ site.site_name }}</h2> 
      <h4>{{ site.site_street }}</h4> 


      <!-- View Details --> 
      <a href="{% url 'sites:details' site.id %}" class="btn btn-primary btn-sm" role="button">View Details&nbsp;<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> 

     </div> 
    </div> 
    </div> 

です。