html - 使用 Bootstrap 在警报中定位按钮

Question

在过去的几个小时里，我尝试了我想到的所有可能的方法，并在 SO 上找到了在 <div> 中移动一个按钮的方法。与 alert在不改变垂直位置的情况下将类向右移动，因此它与文本保持对齐，但不幸的是我什么也没想到。

这里是简单的 html 部分: https://jsfiddle.net/me420sky/

我想要的是把按钮放在右边。是的，我知道pull-right但它使它脱离了常规流程，文本不再对齐。定位也是如此，因为页面不再响应。

请问有人能帮忙吗？

Answer 1

这会起作用。

如果文本不与按钮垂直对齐无关紧要，您可以删除 span 的 line-height 属性。

.alert .btn-danger {
  float: right;
}

.alert span {
  line-height: 34px;
}

.alert > div:after {
  clear: both;
  content: '';
  display: table;
}

Working Example

方案二:不固定span标签的行高

在这种情况下，您为父元素提供了 line-height 而不是文本。因此，如果您有断行，较大的 line-height 对文本没有影响。

.alert span {
  vertical-align: middle;
  line-height:normal;
}

.alert > div {
  line-height: 34px;
}