如何阻止内容堆叠在彼此之上？

Question

我一直在创建一个博客，并且我制作了这些卡片，但我希望内容并排堆叠，而不是堆叠在一起。

这里有一个形象：

http://imgur.com/KP7kThH

model.py

class ProjectPost(models.Model): 
    title = models.CharField(max_length=120) 
    author = models.ForeignKey('auth.User') 
    image_url = models.CharField(max_length=1000, blank=True, null=True) 
    text = models.TextField() 

    def __str__(self): 
     return self.title 

views.py

def projects(request): 
    ProjectPosts = ProjectPost.objects.all() 
    return render(request, 'blog/projects.html', {'projectposts': ProjectPosts}) 

projects.html

{% extends 'blog/base.html' %} 

{% block content %} 
    {% if user.is_authenticated %} 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="text-right"> 
        <a href="{% url 'post_new' %}"><h1 class="glyphicon glyphicon-plus"></h1></a> 
       </div> 
      </div> 
     </div> 
    {% endif %} 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 "> 
        {% for projectpost in projectposts %} 
        <div class="projectposts"> 
         <img src="{{ projectpost.image_url }}" id="projects_image" class="img-thumbnail"/> 
         <div class="page-header"> 
          <h2>{{ projectpost.title }}</h2> 
         </div> 
         <footer>By: {{ projectpost.author }}</footer> 
         <p>{{ projectpost.text | truncatewords:50 }}</p> 
        </div> 
        {% endfor %} 
       </div> 
      </div> 
     </div> 
{% endblock %} 

Answer 1

你已经包裹你的col-lg-3 ...内循环。你需要把列班内循环，而不是外面：

<div class="row"> 
    {% for projectpost in projectposts %} 
    <!-- These columns need to be inside the for loop --> 
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 "> 
     <div class="projectposts"> 
      ... 
     </div> 
    </div> 
    {% endfor %} 
</div> 

您可以移除一级嵌套，只是把所有的类都在一个<div class="projectposts col-lg-3 col-md-3...">。