使用引导程序在警报内定位按钮答案

【问题标题】：Position button inside alert with bootstrap使用引导程序在警报内定位按钮
【发布时间】：2021-02-05 23:04:25
【问题描述】：

在过去的几个小时里，我尝试了所有可能的方法，并在 SO 上发现将 <div> 内的按钮与 alert 类移动到右侧而不改变它的垂直位置，所以它保持对齐有文字，但不幸的是我什么也没想到。

这里是纯 html 部分的摆弄： https://jsfiddle.net/me420sky/

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

有人可以帮忙吗？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 css-position

【解决方案1】：

这会起作用。

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

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

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

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

Working Example

选项2：没有固定span标签的行高

在这种情况下，您给父母一个line-height 而不是文本。因此，如果您有断线，那么大的line-height 对文本没有影响。

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

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

【讨论】：

太棒了！如此简单，但我还远远没有想到这个！谢谢 :) 还有一件事：是否有可能在没有固定行高的情况下保持文本对齐？
您可以尝试选项 2。您仍然有一个固定的行高，但它对文本没有影响。
一定要用display: table吗？如果你删除它，你可以在你想要垂直居中的东西上添加vertical-align: middle 或position: relative; top: 50%; transform: translateY(-50%);。
也可以是display:block，但必须是block 或table。

【解决方案2】：

您可以使用 btn-xs 引导程序 3 的类。

例如：

<div class="alert alert-danger">
     Lorem ipsum...
     <button class="btn btn-xs btn-success pull-right">
              Click                     
     </button>
</div>

结果如下：

【讨论】：

@ambe5960 是的，但你不要以这种方式使用自定义 css