右键对齐按钮组

Question

此按钮组不希望对齐。我试图向btn-group div添加pull-right，text-right，float-right bootstrap类。我试图改变buttons类的text-align，padding，margin，float css属性。什么都没有帮助。只有当我设置像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>

Answer 1

默认情况下，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，但这会使它像它的内容只需要 - 如果它只是按钮的宽度，你就不能再将它们“对齐”了。）

Answer 2

flex是最好的方法：

   

 <div style="display:flex">
      <div>  <button>PR</button></div>
      <div> <button>DEL</button></div>
 </div>

这会对齐按钮。你可以玩这个。你想要空间吗？对齐吧？

Answer 3

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

flexbox 方法优于 float 方法，后者可能会导致不必要的副作用。

引导v5

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>

<div class='row g-0'>
  <div class='col-md-5 w-auto ms-auto'>
      <button class="btn btn-success btn-sm">PR</button>
      <button class="btn btn-danger btn-sm">DEL</button>
  </div>
</div>

引导v4.6.0：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"/>

<div class='row no-gutters'>
  <div class='col-md-5 w-auto ml-auto'>
      <button class="btn btn-success btn-sm">PR</button>
      <button class="btn btn-danger btn-sm">DEL</button>
  </div>
</div>