Question

我正在使用Django框架构建一个网站，它将显示一个地方网格（每行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>

在我的浏览器中，我看到了我想要的内容，但是每个网站都在列中的新行上，而我希望它在三行中，然后分成一个新行，然后开始另一行三行。

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>

通过这种方式，您将获得多个列，每个列都有自己的内容。

Django Bootstrap Grid将所有内容分解为新行

1 个答案: