【发布时间】：2021-09-14 21:52:50
【问题描述】：
所以我正在制作一个博客应用程序，但这让我很烦，问题是不是调整大小只占用卡片大小的空间，而是占用整个列
这是我的代码 (Jinja2)
{% extends "base.html" %}
{% block title %}
Blogs - DevExplorer
{% endblock title %}
{% block content %}
<div class="container">
<div class="row no-gutters">
<div class="text-center">
<a href="{{ url_for('new_post') }}">
<button class="btn btn-primary btn-primary btn-lg rainbow-button">Post A New Blog</button>
</a>
<br><br><br>
</div>
<!-- Displaying the posts, if the database if empty telling the user to post a post -->
{% if posts.items != [] %}
{% for i in posts.items %}
<!-- Displaying the posts if exists -->
{% if i.thumbnail %}
<a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-auto" style="text-decoration: none; color: white;">
<div class="col-auto">
<div class="card cards" style="box-shadow: 1px 1px 30px black; border: none; width: 612px;">
<div class="card-body" style="margin: 0; padding: 0;">
<img src="{{ url_for('static', filename='profile_pics/' ~ i.author.profile_picture) }}" alt="DP" width="32"
height="32"> {{ i.author.username }}
</div>
<br>
<span class="text-muted" style="margin-bottom: 10px;">Posted On: {{ i.date_posted.date() }}</span>
<img src="{{ i.thumbnail }}" alt="Image Support" style="border-radius: 25px;">
<br>
<h5 class="card-title" style="font-weight: 600;">
{{ i.title }}
</h5>
</div>
</div>
</a>
{% else %}
<a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-auto" style="text-decoration: none; color: white;">
<div class="col-auto">
<div class="card cards" style="box-shadow: 1px 1px 30px black; border: none; width: 612px;">
<div class="card-body" style="margin: 0; padding: 0;">
<img src="{{ url_for('static', filename='profile_pics/' ~ i.author.profile_picture) }}" alt="DP"
width="32" height="32"> {{ i.author.username }}
</div>
<br>
<span class="text-muted" style="margin-bottom: 10px;">Posted On: {{ i.date_posted.date() }}</span>
<br>
<h5 class="card-title" style="font-weight: 600;">
{{ i.title }}
</h5>
<p class="elipsis" style="height: 17rem;">
{{ i.content }}
</p>
</div>
</div>
</a>
{% endif %}
{% endfor %}
{% else %}
<!-- Messaging the user that no posts exists -->
<h1 style="font-weight: bolder; text-align: center;">No Posts Yet! Be the first to post one!</h1>
{% endif %}
</div>
<!-- Pagination -->
{% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
{% if page_num %}
{% if posts.page == page_num %}
<a class="btn btn-info" style="margin: 5px;" href="{{ url_for('list_posts', page=page_num) }}">{{ page_num }}</a>
{% else %}
<a class="btn btn-outline-info" style="margin: 5px;" href="{{ url_for('list_posts', page=page_num) }}">{{ page_num }}</a>
{% endif %}
{% else %}
...
{% endif %}
{% endfor %}
</div>
<br><br>
{% endblock content %}
我确实尝试过使用col-auto，但它仍然不起作用，并且扭曲了页面的布局
非常感谢任何帮助！
【问题讨论】：
标签： html css jinja2 bootstrap-5