Twitter bootstrap 3 如何阻止内容相互堆叠？

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

这是一张图片：

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

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

视图.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

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

{%extends'blog/base.html%}
{%block content%}
{%if user.u经过身份验证%}
{%endif%}
{projectposts%中的projectpost的%s}
{{projectpost.title}
作者：{{projectpost.author}
{{projectpost.text | truncatewords:50}

{%endfor%}
{%endblock%}

您已将for循环包装在

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>

{projectposts%中的projectpost的%s}
...
{%endfor%}

---

您可以删除一级嵌套，只需将所有类放在一个

中，在不知道您使用的代码/样式的情况下，无法回答（没有不合理的宽泛答案）。抱歉，刚刚添加了它们。