右对齐按钮组

Question

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

<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>

Answer 1

引导程序 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>

Answer 2

Bootstrap 默认应用于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设置，但这将使其与内容所需的一样宽 - 如果它只有按钮使它成功，您不能再将它们“对齐”到任一侧。）