logo标签列表

在row中使用form-inline将Bootstrap对齐到右侧

htmlbootstrap-4
3

现状：

enter image description here 应该是这样的：

enter image description here

目前第二个组件被推到右侧，但其内容仍然向左对齐。我尝试添加 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>
你能添加一张图片或者用图表解释你想要的布局吗？ - Shidersz
1个回答
7
我已经将 <div class="form-inline"> 元素添加了 style="display: flex; justify-content: flex-end"，并且它按照我的要求工作了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接