html - 使用 Bootstrap 4 将标签元素内的图标定位到右侧

Question

我正在尝试使用标签元素内的图标来执行此操作。

照片处理:

我得到了什么:

这是该部分的代码

<div class="form-group col-6 m-0">
    <label class="my-1 mr-2" for="role"><i class="fas fa-tag"></i> ROLE <span class="ml-auto"><i class="fas fa-question-circle"></i></span></label>
    <select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" id="role">
        <option value="1">Administrator</option>
    </select>
</div>

在此span元素 <span class="ml-auto"><i class="fas fa-question-circle"></i></span> 我试过:

.ml-auto
.text-right
.d-flex .justify-content-end
.float-right
.pull-right

但这些似乎都不起作用。

我怎样才能得到 i元素 float 到右侧，如 Photoshop 图像中所示？

Answer 1

添加d-flex & align-items-center类到 <label> ，此时.ml-auto将工作:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div class="form-group col-6 m-0">
    <label class="my-1 d-flex align-items-center" for="role"><i class="fas fa-tag mr-2"></i> ROLE <span class="ml-auto"><i class="fas fa-question-circle"></i></span></label>
    <select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" id="role">
        <option value="1">Administrator</option>
    </select>
</div>