我想像 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;
}
最佳答案
要在列中显示您的帖子，请使用来自 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>
关于python - 如何使用 html 和 css 在 python 中连续显示 3 个帖子？它现在显示最后一个帖子下的每个帖子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55581093/