Bootstrap - 如何从这张 bootstrap 卡片的底部移除多余的 space？
Bootstrap - How can I remove the extra space from the bottom of this bootstrap card?
所以我正在制作一个博客应用程序，但这让我很烦，问题是不是调整大小只占据与卡片大小一样大的 space，而是占据了整个列
这是我的代码 (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 但它仍然不起作用，并且扭曲了页面布局
非常感谢任何帮助！
这里发生的事情是卡片正在调整他这一边的卡片的高度。所以如果你想让卡片在同一个轴上的高度不同，那么你可以使用一种叫做 Masonry 的东西。它会让你达到你想要的结果。
在您的文档中包含此 js 文件
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
并将 data-masonry='{"percentPosition": true }' 添加到 .row 包装器。
查看实际代码。
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" data-masonry="{"percentPosition": true }" style="position: relative; height: 1953.6px;">
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 0px;">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 410px;">
<div class="card p-3">
<figure class="p-3 mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 609.6px;">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 987.6px;">
<div class="card bg-primary text-white text-center p-3">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1125.6px;">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1303.6px;">
<div class="card">
<svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1589.6px;">
<div class="card p-3 text-end">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1727.6px;">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
所以我正在制作一个博客应用程序，但这让我很烦，问题是不是调整大小只占据与卡片大小一样大的 space，而是占据了整个列
这是我的代码 (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 但它仍然不起作用，并且扭曲了页面布局
非常感谢任何帮助！
这里发生的事情是卡片正在调整他这一边的卡片的高度。所以如果你想让卡片在同一个轴上的高度不同，那么你可以使用一种叫做 Masonry 的东西。它会让你达到你想要的结果。
在您的文档中包含此 js 文件
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
并将 data-masonry='{"percentPosition": true }' 添加到 .row 包装器。
查看实际代码。
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" data-masonry="{"percentPosition": true }" style="position: relative; height: 1953.6px;">
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 0px;">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 410px;">
<div class="card p-3">
<figure class="p-3 mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 609.6px;">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 987.6px;">
<div class="card bg-primary text-white text-center p-3">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1125.6px;">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1303.6px;">
<div class="card">
<svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1589.6px;">
<div class="card p-3 text-end">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 1727.6px;">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>