Bootstrap 4如何将custom-checkbox浮动到文本右侧？

我有一段Bootstrap 4的筛选面板代码，想要把custom-checkbox浮动到文本右侧，但直接加float:right没效果，请问怎么解决？

原代码如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="card attribute filter-panel" data-type="select" data-id="1">
<div class="card-header">
<i class="fa fa-angle-down pull-right"></i>
<span class="card-title">color</span>
</div>
<div class="card-body" style="padding: 0px; padding-top: 15px">
<ul class="filter-ul">
<li>
<div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1">
<label class="custom-control-label " for="customCheck1">red</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2">
<label class="custom-control-label " for="customCheck2">blue</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3">
<label class="custom-control-label " for="customCheck3">green</label>
</div>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

嗨，我之前也踩过这个坑！Bootstrap 4的custom-control组件内部是用绝对定位来放置复选框的，所以直接加float:right根本不会生效。给你两个简单可行的解决办法：

方法1：用Bootstrap内置的Flex类快速搞定 #

这是最推荐的方式，不用写额外CSS，直接利用Bootstrap的flex工具类调整元素顺序：
给每个custom-control容器加上d-flex flex-row-reverse类，再配合justify-content-end让整体内容右对齐，完美实现复选框在文本右侧的效果：

<div class="custom-control custom-checkbox d-flex flex-row-reverse justify-content-end">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1">
<label class="custom-control-label " for="customCheck1">red</label>
</div>

这里可以去掉原来的direction:rtl，因为flex反向排列已经能实现我们要的顺序，而且不会影响文本的排版逻辑。

方法2：自定义CSS覆盖默认定位规则 #

如果不想用flex，也可以通过自定义CSS手动调整复选框的位置：

.custom-control.custom-checkbox .custom-control-input {
  right: auto;
  left: 0;
}
.custom-control.custom-checkbox .custom-control-label::before,
.custom-control.custom-checkbox .custom-control-label::after {
  right: auto;
  left: -1.5rem;
}

然后把容器上的direction:rtl删掉，只保留text-align:right就行。这段CSS的作用是把原本靠右侧定位的复选框，移到左侧位置，配合文本右对齐，视觉上就是复选框在文本右侧了。

完整修改后的代码（方法1示例） #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="card attribute filter-panel" data-type="select" data-id="1">
<div class="card-header">
<i class="fa fa-angle-down pull-right"></i>
<span class="card-title">color</span>
</div>
<div class="card-body" style="padding: 0px; padding-top: 15px">
<ul class="filter-ul">
<li>
<div class="custom-control custom-checkbox d-flex flex-row-reverse justify-content-end">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1">
<label class="custom-control-label " for="customCheck1">red</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox d-flex flex-row-reverse justify-content-end">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2">
<label class="custom-control-label " for="customCheck2">blue</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox d-flex flex-row-reverse justify-content-end">
<input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3">
<label class="custom-control-label " for="customCheck3">green</label>
</div>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

内容的提问来源于stack exchange，提问作者hretic