html - 如何将 btn-toolbar 内的 btn-group 对齐到右 Bootstrap 4

Question

我有一个 btn-toolbar，它有两个 btn-group。默认情况下，组向左对齐。但我需要第二个工具栏右对齐。

这是我的代码:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-toolbar rounded" role="toolbar" aria-label="Toolbar with button groups" id="main-toolbar">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-dark btn-md text-center rounded" id="toolbar-button">
      <span class="fa fa-edit fa-2x"></span><br>
      <span class="toolbar-item-text">Edit</span>
    </button>
  </div>
  <div class="btn-group mr-2 float-right" role="group" aria-label="Second group">
    <button type="button" class="btn btn-dark btn-md text-center rounded" id="toolbar-button" id="measurement-button">
        <span class="fa fa-bars fa-2x"></span><br>
        <span class="toolbar-item-text">Measurements</span>
    </button>
  </div>
</div>

当我在 bootstrap 3 中使用 pull-right 时，这对我有用，但在使用 bootstrap 4(包括 popperJS)时，它不起作用。我已经阅读了很多关于堆栈的答案，但它们都不适用于 bootstrap 4，而且 btn-group 位于 btn-toolbar 中。这是我得到的结果:

但我需要右上角的测量按钮，而不是下一行。谢谢!

Answer 1

在第二个 btn-group 中使用 bootstarp 4 .ml-auto 类。它会将 btn-group 右对齐，因为它具有 margin-left: auto 属性

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-toolbar rounded" role="toolbar" aria-label="Toolbar with button groups" id="main-toolbar">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-dark btn-md text-center rounded" id="toolbar-button">
      <span class="fa fa-edit fa-2x"></span><br>
      <span class="toolbar-item-text">Edit</span>
    </button>
  </div>
  <div class="btn-group ml-auto" role="group" aria-label="Second group">
    <button type="button" class="btn btn-dark btn-md text-center rounded" id="toolbar-button" id="measurement-button">
        <span class="fa fa-bars fa-2x"></span><br>
        <span class="toolbar-item-text">Measurements</span>
    </button>
  </div>
</div>