将这些帖子与Bootstrap4和Flask对齐最有效的方法是什么?

2024-03-28 17:49:45 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在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 %}

Tags: div应用程序datetitlearticlecolcontentjohn
1条回答
网友
1楼 · 发布于 2024-03-28 17:49:45

更换您的主页.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 %}

相关问题 更多 >