我正在windows10操作系统上用python3.6、Flask、Bootstrap4和Postgresql构建一个web应用程序。 现在,我只是使用虚拟数据来测试应用程序,并在本地机器上运行它。你知道吗
应用程序应该获取一个数据集中的前四篇文章(posts),并将第一篇文章显示在自己的一行中,宽度为12列。 然后它应该并排显示接下来的三个帖子,每个帖子的宽度为3列。 我可以让应用程序产生正确的宽度和正确显示第一个职位。然而,不是把第二,第三和第四个职位并排,而是把他们都放在对方下面。你知道吗
换句话说,它应该是这样的。。。你知道吗
--------1--------
--2-- --3-- --4--
但结果是这样的。。。你知道吗
--------1--------
--2--
--3--
--4--
我尝试剥离它的所有样式,删除了很多类标识,除了“row”和“col-md-12”和“col-md-4”类。我想可能是某些特定的样式弄乱了它,但我得到了基本上相同的结果。你知道吗
下面是我的代码片段。你知道吗
你知道吗应用程序类型你知道吗
from flask import Flask, render_template
app = Flask(__name__)
posts = [
{
'author': 'JOHN DOE',
'title': 'Blog Post 1',
'content': 'Most recent content.',
'date_posted': '01/01/2019'
},
{
'author': 'JOHN DOE',
'title': 'Blog Post 2',
'content': 'Secondary content.',
'date_posted': '01/01/2019'
},
{
'author': 'JOHN DOE',
'title': 'Blog Post 3',
'content': 'Secondary content.',
'date_posted': '01/01/2019'
},
{
'author': 'JOHN DOE',
'title': 'Blog Post 4',
'content': 'Secondary content.',
'date_posted': '01/01/2019'
}
]
@app.route("/")
def home():
return render_template("home.html", landing=True, posts=posts)
if __name__ == "__main__":
app.run(debug=True)
你知道吗主页.html你知道吗
{% extends 'layout.html' %}
{% block landing %}
{% for post in posts %}
{% if loop.index == 1 %}
<div class="row">
<article class="media content-section col-md-12">
<div class="media-body">
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
</div>
</article>
</div>
{% elif loop.index <= 4 %}
<div class="row">
<article class="media content-section col-md-4">
<div class="media-body">
<h3><a class="article-title" href="#">{{ post.title }}</a></h3>
<p class="article-content">{{ post.content }}</p>
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
</div>
</article>
</div>
{% endif %}
{% endfor %}
{% endblock landing %}
更换您的主页.html使用以下代码
相关问题 更多 >
编程相关推荐