我想像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>
这方面的文档在这里; https://getbootstrap.com/docs/4.1/layout/grid/
工作示例;https://codepen.io/marksweb/pen/vMywPZ
我认为您的解决方案可能是使用弹性框或网格。Flexbox是引导程序在其大多数组件中使用的。我宁愿使用这两种惊人的技术而不是引导。它使您可以更好地控制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
如果您需要有关我的答案的任何其他解释，请随时提问。