html - Bootstrap：使用卡片列类时减少卡片之间的水平间距

Question

我正在尝试渲染几行 Bootstrap 卡，每行并排有两张卡。

我的代码正在运行，但是当屏幕展开时，卡片之间有很多空间。

这是代码：

HTML（使用 Django 模板）

{% block body %}
    <h2>{{ title }}</h2>

    <div class="container-fluid">

    <div class="card-columns mx-auto col-10">

    {% for entry in entries %}

    <div class="mx-auto card h-100 mb-3" style="max-width: 480px">
        <a href="{% url 'listing' listing.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>
        

    {% empty %}
        No content found.
    {% endfor %}
    </div>
</div>

{% endblock %}

CSS：

body  {
    min-height: 100vh;
    background-color: #ecf1f4;
}

.card-columns {
    column-count: 2;
    column-gap: 20px;  /* does not affect the spacing! */
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
 
}

@media (max-width: 500px) {
    .card-columns {
        column-count: 1;
    }
}

column-gap不影响间距。这是被其他东西覆盖了吗？或者，也许还有另一个错误？

这是一个例子：

如果这不可能用 来实现card-columns，那么我愿意接受另一种方法。

提前感谢您可以给这个 CSS 新手的任何建议！

标签： htmlcssdjangodjango-templates