Is there a solution to prevent padding overflow in the Bootstrap Card Column when trying to split a dictionary of items into three columns? The issue is that the padding from bottom rows spills into the top of the next column (refer to col1->col2).
Below is the code snippet:
<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>