右对齐按钮组答案

【问题标题】：Align button group right右对齐按钮组
【发布时间】：2017-08-23 10:39:30
【问题描述】：

这个按钮组只是不想对齐。我尝试将右拉、右文本、右浮动引导类添加到btn-group div。我尝试更改 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>

【问题讨论】：

Bootstrap 默认将 float:left 应用于按钮组中的按钮。但是用 float:right 覆盖它效果很好......如果它不适合你，那么你就没有做对。
@CBroe 但它的外观崩溃了，因为一切都颠倒了。
这就是 float 的工作原理，是的。如果你不想要那种效果，你就不要浮动。用 none 覆盖 float 可以在父元素 jsfiddle.net/Lhfhaa2a 上使用 text-align
@CBroe 嗯，我没想到会这样，但它看起来仍然很酷 :) 非常感谢。我想我需要研究一段时间的 css 文档才能更好地理解核心概念。也感谢你表达我的弱点。最良好的祝愿。附言如果你愿意，你可以推送一个答案。然后我可以让它成为主要答案并为你赢得一些声誉。或者，如果您不在乎这些虚荣心，我可以自己做:)

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

我创建了一个quick fiddle 来演示使用text-right 和float-right 之间的区别。

【解决方案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，但这将使它与它的内容一样宽- 如果它只有按钮的宽度，你就不能再将它们“对齐”到任何一侧。）

【讨论】：

【解决方案3】：

flex 是最好的方法：

   

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

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

【讨论】：

谢谢。但我只需要在 col-md-5 列中将按钮组对齐。你知道如何解决这个问题吗？
你试过我上面写的吗？需要完美工作。你能把什么不能用这个发给我吗？
不@simi，由于上述原因，我没有尝试过。我不需要任何解决方案，但需要一个不会改变我的网格系统的解决方案。顺便说一句，问题已经解决了。您可以查看首选答案以了解详细信息。无论如何，感谢您的时间和考虑。

【解决方案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>

【讨论】：

引导程序v5

引导程序v4.6.0:

引导程序`v5`

引导程序`v4.6.0`: