引导卡列填充/边距溢出

Posted 2023-03-28

【中文标题】引导卡列填充/边距溢出

【英文标题】：Bootstrap Card Column Padding/Margin Overflow

【发布时间】：2020-10-27 18:23:53

【问题描述】：

我正在尝试使用引导卡列将项目字典拆分为三列，但底部行的填充似乎溢出到下一列的顶部（请参阅 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>

【参考方案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 卡片列可能不是理想的选择。离开你的屏幕抓取。

【讨论】：

不幸的是，这似乎不起作用。虽然我确实添加了卡片类（并省略了背景颜色更改），但它只是让它看起来像这样imgur.com/yfT1PZa 编辑：其实没关系，那没有更新。包装确实有效，谢谢！