什么是使这些职位与Bootstrap4和瓶的最有效方法是什么?

问题描述 投票:1回答:1

我在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 %}
python bootstrap-4 jinja2
1个回答
0
投票

使用下面的代码替换您的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 %}
© www.soinside.com 2019 - 2024. All rights reserved.