如何将 btn-toolbar 向右对齐？答案

【问题标题】：How to align btn-toolbar to right?如何将 btn-toolbar 向右对齐？
【发布时间】：2016-04-16 23:09:50
【问题描述】：

我正在创建引导模式的页脚，我会将 btn 工具栏对齐到文本的右侧。我尝试使用以下代码：

  <div class="modal-footer">
    <div class="text-center alert alert-danger">
      <p>confirm deletation?
        <span class="btn-toolbar pull-right">
          <button class="btn btn-success btn-flat fa fa-times"></button>
          <button data-dismiss="modal"
                  class="btn btn-success btn-flat fa fa-check"></button>
        </span>
      </p>
    </div>
  </div>

但我得到以下结果：

如您所见，右侧的按钮组未与文本对齐。如何解决？

【问题讨论】：

标签： twitter-bootstrap button modal-dialog alignment toolbar

【解决方案1】：

我认为您需要使用 inline 类。

类似这样，尽管您可能需要处理填充：

<div class="modal-footer">
  <div class="alert alert-danger">
    <div class="btn-toolbar inline pull-right"> 
      <button class="btn btn-success btn-flat inline fa fa-times"></button>
      <button data-dismiss="modal" class="btn btn-success btn-flat inline fa fa-check"></button>
    </div>
    <p>confirm deletation?</p>
  </div>
</div>

这是JSFiddle

【讨论】：

和我的结果一样！
在我的回答中，文本与按钮右对齐。这不是你所追求的吗？
@smartmouse 看着您对另一个答案的回复，您是否要垂直对齐文本？在你的问题中你说右对齐。
我想要右边的 btn-toolbar 和垂直对齐的文本。

【解决方案2】：

添加此样式

style="margin-top: -5px;"

像这样：

  <div class="modal-footer">
    <div class="text-center alert alert-danger">
      <p>confirm deletation?
          <span class="btn-toolbar pull-right" style="margin-top: -5px;">
          <button class="btn btn-success btn-flat fa fa-times"></button>
          <button data-dismiss="modal"
                  class="btn btn-success btn-flat fa fa-check"></button>
        </span>
      </p>
    </div>
  </div>

【讨论】：