我试图使用bootstrap Card Column将项目字典拆分为三列，但是底部行的填充似乎会溢出到下一列的顶部（请参见col1->col2)。 有办法解决这个问题吗？

填充/边距溢出

代码如下:

<div class='container p-2 mt-2 mb-4 rounded shadow-lg' style='background-color: #d3b273;'>
            <!-- Dropdown -->
            <div class="btn-group w-100 pb-2">
                <input type="text" autocomplete="off" class="form-control border-secondary text-center col-10" value={{selected_agency}}>
                <button type="button" id="agency_dropdown_menu" class="btn dropdown-toggle dropdown-toggle-split col-2 bg-white rounded border-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                <div class="dropdown-menu border-secondary w-100 dropdown-menu-right scrollable-menu">
                    {% for agency in agencies %}
                        <button class="dropdown-item border-secondary" name='agency-button' type="submit" value='{{agency}}'>{{agency}}</button>
                    {% endfor %}
                </div>
            </div>
            <!-- Fields and values -->
            <div class='card-columns pb-2'>
                {% for field in headers %}
                {% with agency_dict|dictionarylookup:field.name as val %}
                {% ifequal val "" %}
                {% else %}
                <div class="d-flex flex-row card_" style='display: inline-block;'>
                    <div class='d-flex flex-row p-2 m-1 rounded' style='background-color: #8f6e2d; display: inline-block;'>
                        <h4 class='mb-1 mr-3 text-center text-white'>{{field.verbose_name}}:</h3>
                        <p class='m-0 align-self-center' style='color: #edd290;'>{{agency_dict|dictionarylookup:field.name}}</p>
                    </div>
                </div>
                {% endifequal %}
                {% endwith %}
                {% endfor %}
            </div>
        </div>

<style>
.card-columns {
    column-count: 3;
}
</style>