Как остановить контент от укладки друг на друга?

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...">.