将按钮组对齐到右侧

Question

这个按钮组就是无法对齐。我试过在btn-group div中添加pull-right、text-right和float-right的bootstrap类。我也试过为buttons类更改text-align、padding、margin和float css属性。但都没有用。只有当我设置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>

- Igor Chernega

---

Bootstrap默认将按钮组中的按钮应用float:left。但是使用float:right覆盖它也完全没有问题...如果对你来说不行，那么你就没有做对。 - CBroe

@CBroe但它会崩溃外观，因为它会反转一切。 - Igor Chernega

这就是float的工作原理。如果你不想要这种效果，那么你就不需要float。将float覆盖为none，可以让你在父元素上使用text-align属性。https://jsfiddle.net/Lhfhaa2a/ - CBroe

@CBroe 嗯，我没想到会这样，但它看起来还不错 :) 非常感谢。我想我需要挖掘一下 CSS 文档，以更好地理解核心概念。也感谢您指出我的弱点。最好的祝愿。 P.S. 如果您想的话，您可以回答。然后我可以将其作为主要答案，并为您赚取一些声望。或者如果您不在意这样的虚荣心，我也可以自己做。 :) - Igor Chernega

Answer 1

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>

- Goran Siriev

---

我创建了一个快速小样，以演示使用“text-right”和“float-right”的区别。 - OfirD

Answer 2

Bootstrap默认将按钮组中的按钮应用float:left。但是，用float:right覆盖按钮的样式同样有效...但这样会导致元素以相反的顺序显示。

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

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

我在这里还为父元素添加了display:block，以便在较小的屏幕分辨率下占据整个宽度（它最初设置为display: inline-block，但这将使其仅尽可能地宽 - 如果它只有按钮的宽度，则不能再将它们“对齐”到任何一侧。）

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

- CBroe

Answer 3

Flexbox方法优于float方法，后者可能会导致意外的副作用。

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

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

- vsync

Answer 4

flex is the best way:

   

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

这会使按钮对齐。你可以尝试不同的对齐方式。需要空格吗？向右对齐？

- simi

---

谢谢。但是我只需要将按钮组在 col-md-5 列中右对齐。您有什么解决这个问题的想法吗？ - Igor Chernega

你试过我上面写的吗？需要完美地工作。你能把哪里出了问题发给我吗？ - simi

没有@simi，我没有尝试它是因为上面提到的原因。 我不需要任何解决方案，但需要一个不改变我网格系统的解决方案。 顺便说一句，这个问题已经解决了。 您可以查看首选答案以获取详细信息。 无论如何，感谢您的时间和考虑。 - Igor Chernega