使用 Bootstrap 3 等高列，同时保留列填充

Posted 2023-02-23

【中文标题】使用 Bootstrap 3 等高列，同时保留列填充

【英文标题】：Equal height columns with Bootstrap 3 while preserving column padding

【发布时间】：2014-10-01 16:16:10

【问题描述】：

我有一个常规的 Bootstrap 3 CSS 设置。我想对一行内的列应用相同的高度，并且一直在研究使用display:table 和display:table-cell。此方法有效，但它似乎自然而然地在内容较少的列上应用垂直填充。

以这个 html 为例：

<div class="row">
    <div class="col-xs-4">
        <div class="block">
            Content for block<br />
            Some more content<br />
            And a bit more<br />
            Last bit
        </div>
    </div>
    <div class="col-xs-8">
        <div class="block">
            Content for block<br />
            Only some more content
        </div>
    </div>
</div>

然后是这个 CSS：

.row  
  display: table;
  width: 100%; 

.row > div 
  float: none;
  display: table-cell;
  vertical-align: top; 

.block  
  height: 100%;
  background: red; 

现在列确实具有相同的高度，但是具有红色背景的.block 没有反映这一点，因为第二列应用了我无法删除的底部填充。

请看这个小提琴的例子：http://jsfiddle.net/cyan8fjz/

有没有办法让我的.block 使用完整的height:100%？理想情况下，我不想绝对定位 .block，因为列上的左右填充（可能会在不同的屏幕分辨率下发生变化）。

请注意，我在上面的示例中没有包含 Bootstrap CSS，但我有。假设它是相关的并包含在所有示例中。

【参考方案1】：

你可以像这样使用'padding-bottom: 1000em; margin-bottom: -1000em; 技巧。

这是一个例子：Link

【讨论】：

超级！允许我在不破坏任何内容的情况下应用更多样式，例如对.block 进行填充。谢谢。