Question

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

这是一张图片：

http://imgur.com/KP7kThH

model.py

tmrString2

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

projects.html

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

Answer 1

您已将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>

您可以删除一个级别的嵌套，只需将所有类放在一个<div class="projectposts col-lg-3 col-md-3...">中。

如何阻止内容堆叠在一起？

1 个答案: