コンテンツを重ねるのを止めるにはどうすればいいですか？

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

：ここ

はイメージですあなたは col-lg-3 ...内側のループのためにあなたを包んいる

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

。あなたはない、それ外に、ループ内の列クラスを配置する必要があります。

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

あなたは、ネストの1つのレベルを削除し、ちょうど1 <div class="projectposts col-lg-3 col-md-3...">にすべてのクラスを置くことができるかもしれません。