我在Windows 10操作系统的建设与Python 3.6,烧瓶,Bootstrap4和PostgreSQL的Web应用程序。现在,我只是用虚拟数据来测试应用程序,我运行它在我的本地机器上。
该应用程序是应该采取的第一个四个柱在一个数据集(个)和具有12列的宽度显示在其自己的行中的第一篇文章。然后它应该显示下一三个柱侧由端每3列的宽度。我能到产生正确宽度和正确显示的第一篇文章中的应用。然而,而不是把第二,第三和第四帖并排侧,它是把它们都互相下方。
换句话说,它应该是这样的......
--------1--------
--2-- --3-- --4--
但它出来像这样...
--------1--------
--2--
--3--
--4--
我想剥离这一切的造型和除了“行”和“COL-MD-12”和“col-MD-4”类去除很多类标识。我想,也许与特定的造型是它搞乱了一些东西,但我基本上得到了相同的结果。
下面是我的代码片段。
app.朋友
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)
home.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 %}
使用下面的代码替换您的Home.html
{% extends 'layout.html' %}
{% block landing %}
<div class="row">
{% for post in posts %}
{% if loop.index == 1 %}
<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>
{% elif loop.index <= 4 %}
<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>
{% endif %}
{% endfor %}
</div>
{% endblock landing %}