如何使用 html 和 css 在 python 中连续显示 3 个帖子？它现在显示最后一个下的每个帖子答案

【问题标题】：How to display 3 posts in a row in pyhton with html and css? It now displays every post under the last one如何使用 html 和 css 在 python 中连续显示 3 个帖子？它现在显示最后一个下的每个帖子
【发布时间】：2019-04-08 20:13:17
【问题描述】：

我想像col-md-4 一样显示，但它会显示最后一个帖子下的每个帖子。

我尝试将容器的类设置为col-md-4，但它对我不起作用。我可以像我尝试过的那样直接将它定义到容器中，还是应该将它定义到 CSS 中？如果您能帮助我，我将不胜感激！

我的容器代码是：

<div class="content container">
    <div class="row">
        <div class="col-md-4">

    {% block content %}
        {% for post in posts %}
            <div class="post">
                <div class="date">
                    {{ post.published_date }}
                </div>
                <h1>{{ post.title }}</h1>
                <p>{{ post.text|linebreaksbr | truncatewords:50 }}</p>
                <a href="{% url 'post_detail' pk=post.pk %}" class="btn btn-default">Weiterlesen</a>

            </div>
        {% endfor %}
    {% endblock %}

我还有一个base.py

{% load static %}

<html>
    <head>
        <title>Code Reminder</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div class="page-header">
        <h1><a href="/">Code Reminder</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

</html>

我的 css 是这样的，也许我应该把它定义到 css 中？

blog.css

.page-header {
    background-color: black;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}


.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Ŕoboto', cursive;
}

.date {
    color: #828282;
    font-family: cursive;
    font-size: 10px;
    font-style: normal;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a, .post h2 a:visited {
    color: #000000;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

【问题讨论】：

标签： python css django styles

【解决方案1】：

要在列中显示您的帖子，请使用 bootsrap 中的 col-sm 类；

{% block content %}
  <div class="row">
    {% for post in posts %}
        <div class="col-sm post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h1>{{ post.title }}</h1>
            <p>{{ post.text|linebreaksbr | truncatewords:50 }}</p>
            <a href="{% url 'post_detail' pk=post.pk %}" class="btn btn-default">Weiterlesen</a>
        </div>
    {% endfor %}
  </div>
{% endblock %}

在你的基础模板中，保持简单；

{% load static %}

<html>
    <head>
        <title>Code Reminder</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div class="page-header">
        <h1><a href="/">Code Reminder</a></h1>
    </div>
    <div class="content container">
        {% block content %}
        {% endblock %}
    </div>
</body>

</html>

这方面的文档在这里； https://getbootstrap.com/docs/4.1/layout/grid/

工作示例； https://codepen.io/marksweb/pen/vMywPZ

【讨论】：

是的，这是我之前测试过的东西，没有任何反应。它再次发布在另一个之下，而不是网格样式。
@UrosDobricic 在这种情况下，请将您的引导程序版本升级到 4.1。我还提供了一个指向 codepen 上的工作示例的链接。

【解决方案2】：

我认为您的解决方案可能是使用 flexbox 或网格。 Flexbox 是 bootstrap 在其大多数组件中使用的。我宁愿使用这两种惊人的技术，也不愿使用引导程序。它使您可以更好地控制您的 CSS。

我准备了两个使用它们的简单示例来向您展示如何完成此操作：

弹性盒：

.container {
  height: 100vh;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  background-color: red;
  height: 100px;
  width: 100px;
}

https://jsfiddle.net/s7x98rme/4/

参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

网格：

.container {
  height: 100vh;
}

.container__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.content {
  background-color: red;
  height: 100%;
  width: 200px;
}

https://jsfiddle.net/xu57ryqd/9/

参考：https://gridbyexample.com/examples

如果您需要关于我的回答的任何其他解释，请随时提出。

【讨论】：

这也是我尝试过的方法，它对我的帮助超过了 Bootstrap。但它不会正常显示。当我设置这个选项时出现混乱。：D 也许你可以试试，我已经在 GitHub 上公开了我的博客。在那里你可以看到我的代码。 github.com/UrosDobricic/my-blog.git