html - Bootstrap 与 form-inline in row 右对齐

Question

情况如何:

应该如何:

目前第二个组件被推到右边，但是它的内容是左对齐的。我尝试添加 float-right 类，但它不起作用。

<div class="container">
  <form class="form-row">
    <div class="col-md-3">
     Some component here
    </div>
    <!--Content of this element should be aligned to right-->
    <div class="col-auto ml-auto">
      <div class="form-inline">
        <label>Some label</label>
        <input class="form-control" readonly>
      </div>
      <div class="form-inline">
        <label>Other longer label</label>
        <input class="form-control" readonly>
      </div>
    </div>
  </form>
</div>

Answer 1

我已经添加了 style="display: flex; justify-content: flex-end"到以下元素 <div class="form-inline">它按我想要的方式工作。