如何将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>

当我在引导程序3中使用pull-right时，这对我有用，但是在使用引导程序4（包括popperJS）时，它不起作用。 我在堆栈上读了很多答案，但是它们都不适用于引导程序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>