如何在按钮出现/消失时保持引导行高度相同答案

【问题标题】：How to keep bootstrap row height the same while button appears/dissappears如何在按钮出现/消失时保持引导行高度相同
【发布时间】：2015-06-15 17:07:56
【问题描述】：

我正在使用AngularJS 和 Bootstrap 创建动态表单。每当用户将鼠标悬停在表单的一行上时，我都想让'edit' button 出现。问题是当按钮分别出现/消失时，该行正在增长和缩小，无论如何我都希望保持相同。

设置行的最小高度似乎是答案，即：

ng-style="{'min-height': '40px'}"

但是将它添加到 'div class="row"' 元素会破坏代码，请参阅相应的 fiddle。

有谁知道我哪里出了问题并能提出解决问题的好方法吗？

【问题讨论】：

小提琴似乎不起作用。当我悬停行时，我没有按钮。您是否尝试过“line-height”而不是“min-height”？由于小提琴不起作用，我不确定，但它可能会起作用。（我在 Windows 上使用 Chrome，我也在 IE11 中尝试过）
抱歉，我从模板中删除了 ng-style="{'min-height': '40px'}">'。它现在应该可以工作了，请参阅here

【解决方案1】：

给行一个填充，给按钮一个负边距底部以匹配，就像你在页面底部粘贴页脚时一样。

【讨论】：

【解决方案2】：

@user3042437 是的，现在可以了。 :)（我将其发布为答案而不是评论）

嗯，你有两个问题。第一个是按钮位于第二行。这可以通过添加以下 css 来解决：

.row > div {
    display: inline-block;
}

第二个是您使用 Bootstrap 来设置按钮的样式，而且它们非常大。使用“btn-link”而不是“btn”作为按钮的类，然后使用这个 css 删除它们的边框和顶部和按钮的填充：

.btn-link {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}

我希望这对你有用:)

【讨论】：