Bootstrap+Django实现响应式并排双卡片布局的推荐方法

最优方案是直接使用Bootstrap原生响应式栅格系统实现，不需要额外编写自定义CSS，兼容性和可维护性最好。

改动说明 #

• 先删除原代码里多余的孤立{% endif %}标签，没有对应的{% if %}逻辑会导致Django模板渲染报错
• 在{% for %}循环外部包裹Bootstrap栅格行容器.row，可根据需要在外层加.container/.container-fluid控制整体内容宽度
• 给每个卡片外层套响应式列类col-12 col-md-6：小于768px的小屏下占满整行（单栏展示），768px及以上的大屏下占半行（两列并排）
• 保留卡片的h-100类，保证同行两张卡片高度自动对齐，不会因为内容长度不同出现错位
• 可给.row加g-*类（比如g-3）控制卡片之间的间距，效果更美观

修改后完整代码 #

{% extends "layout.html" %}

{% block body %}
<!-- 可选外层container控制整体最大宽度 -->
<div class="container my-4">
    <!-- row加g-3设置列间距，可按需调整数值 -->
    <div class="row g-3">
    {% for entry in entries %}
        <!-- 响应式列：小屏12列/单栏，md及以上6列/两栏 -->
        <div class="col-12 col-md-6">
            <div class="card h-100" style="max-width: 540px;">
                <a href="{% url 'entry' entry.id %}">
                    <img class="card-img-top" src="{{ entry.image.url }}" alt="{{ entry.title }}">
                </a>
                <div class="card-body">
                    <h5 class="card-title">{{ entry.title }}</h5>
                    <p class="card-text">{{ entry.description }}</p>
                </div>
            </div>
        </div>
    {% empty %}
        <div class="col-12">
            无内容可展示。
        </div>
    {% endfor %}
    </div>
</div>
{% endblock %}

内容的提问来源于stack exchange，提问作者equanimity