右对齐按钮组

Question

这个按钮组只是不想对齐。我尝试将向右拉、向右文本、向右浮动引导类添加到 btn-group div。我尝试更改 buttons 类的文本对齐、填充、边距、浮动 css 属性。没有什么帮助。仅当我将 padding-left 值设置为 padding-left: 28px 。但这不是我要找的。我需要一个针对一般情况的解决方案，但不尝试填充左值需要多少像素。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row issue">
  <div class="title col-md-7">
    <a href="https://www.google.com">Google</a>
  </div>
  <div class="buttons btn-group col-md-5">
    <button class="btn btn-success btn-sm">PR</button>
    <button class="btn btn-danger btn-sm">DEL</button>
  </div>
</div>

原文由 Igor Chernega 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下，引导程序将 float:left 应用于按钮组中的按钮。但是用 float:right 覆盖它工作得很好……但是你会得到元素以相反顺序显示的效果。

如果您不希望这样，您可以设置 float: none - 并在父元素上使用 text-align 来对齐内联按钮。

 .buttons { display: block; text-align: right; }
.buttons .btn { float: none; }

https://jsfiddle.net/Lhfhaa2a/1/

我在这里也为父元素添加了 display:block ，这样它也可以在较小的屏幕分辨率上占据整个宽度（它最初具有 display: inline-block 设置，但这会使它变得一样宽因为它的内容只需要 - 如果它只和按钮一样宽，你不能再将它们“对齐”到任何一侧。）

原文由 CBroe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

引导程序 4

   <div class="text-right">
      <div class="buttons btn-group col-md-5">
        <button class="btn btn-success btn-sm">PR</button>
        <button class="btn btn-danger btn-sm">DEL</button>
      </div>
    </div>

原文由 Goran Siriev 发布，翻译遵循 CC BY-SA 4.0 许可协议