使用bootstrap在警报内定位按钮

Question

过去几个小时我已经尝试了一切可能出现在我脑海中的方法，并且在SO上找到了<div>内的按钮，而alert类向右移动了一个按钮而没有改变它的垂直位置，所以它与文本保持一致，但不幸的是我什么都没有。

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

我想要的是将按钮放在右侧。是的，我知道pull-right，但它会将其从常规流程中取出，并且文本不再对齐。定位也是如此，因此页面不再响应。

请帮助

Answer 1

这会奏效。

如果文字与按钮垂直对齐并不重要，则可以删除line-height的{​​{1}}属性。

span

Working Example

选项2：没有跨度标记的固定行高

在这种情况下，您给父母一个.alert .btn-danger { float: right; } .alert span { line-height: 34px; } .alert > div:after { clear: both; content: ''; display: table; } 而不是文本。因此，如果你有断线，那么大的line-height对文本没有影响。

line-height

Answer 2

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

例如：

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

结果将如下所示：