引导卡列填充/边距溢出

Question

我正在尝试使用引导卡列将项目字典拆分为三列，但底部行的填充似乎溢出到下一列的顶部（请参阅 col1->col2）。有解决办法吗？

Padding/margin overflow

代码如下：

<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>

Answer 1

引导 card-columns 使用 card 的子类，并将填充其各自的列。

用 card 类容器包装您的 card_ 是 card-columns 的预期实现。

<div class="card-columns">

  <div class="card" style='background-color: #8f6e2d'>
      <div class='d-flex flex-row p-2 m-1'>
        <h4 class='mb-1 mr-3 text-center text-white'>{{field.verbose_name}}:</h4>
        <p class='m-0 align-self-center' style='color: #edd290;'>{{agency_dict|dictionarylookup:field.name}}</p>
      </div>
    </div>

</div>

虽然这将解决您的卡片溢出到另一列的问题，但您可能无法通过此解决方案获得预期的外观。

我不能 100% 确定您希望这对字典的外观。 Bootstrap 卡片列可能不是理想的选择。离开你的屏幕抓取。