如何将btn-toolbar中的btn-group与右引导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>

当我pull-right在bootstrap 3中使用时这对我有用，但是在使用bootstrap 4（包括popperJS）时，它不起作用。我在堆栈上读了很多答案，但是它们都不适用于Bootstrap 4，而不是btn-group在内的位置btn-toolbar。这是我得到的结果：

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

Answer 1

.ml-auto在第二个中使用bootstarp 4 类btn-group。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>