Как наиболее эффективно выровнять эти посты с помощью Bootstrap4 и Flask?

Question

Я создаю веб-приложение с Python 3.6, Flask, Bootstrap4 и Postgresql на ОС Windows 10.Сейчас я просто использую фиктивные данные для тестирования приложения и запускаю его на своем локальном компьютере.

Приложение должно взять первые четыре сообщения в наборе данных (записи) и отобразитьПервый пост в отдельном ряду с шириной 12 столбцов.Затем предполагается отображать следующие три сообщения рядом друг с другом шириной 3 столбца.Я могу заставить приложение производить правильную ширину и правильно отображать первый пост.Однако вместо того, чтобы помещать второй, третий и четвертый посты бок о бок, они помещают их все друг под другом.

Другими словами, это должно выглядеть следующим образом ...

--------1--------
--2-- --3-- --4--

Но это получается вот так ...

--------1--------
--2--
--3--
--4--

Я попытался удалить все стили и удалить множество идентификаторов классов, кроме "row" и "col-md-12 "и" col-md-4 "классы.Я подумал, что, может быть, что-то со специфическим стилем испортило это, но я получил тот же результат.

Вот фрагмент моего кода.

app.py

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 %}

Answer 1

Замените ваш 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 %}