css - 难以将 Bootstrap 自定义复选框与右侧对齐

Question

我有一个 bootstrap 4 表，其中有我想右对齐的自定义复选框。

例如，请引用此 fiddle

我已经使用这种方法来创建自定义复选框:

<label class="custom-control custom-checkbox">
    <input type="checkbox" id="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-label"></span>
</label>

到目前为止，我已经尝试添加这个 CSS

.custom-control {
    padding: 0 !important;
    margin: 0 !important;
    width: 0px !important;
}

.custom-control-label::before {
  left: 0;
  padding-right: 0;
  margin-right: 0;
}

.custom-control-label::after {
  left: 0;
  padding-right: 0;
  margin-right: 0;
}

.custom-control .custom-checkbox {
  padding-right: 0;
  margin-right: 0;
}

以及将 .right 和 .pull-right 类添加到所有复选框元素都无济于事。

这道题用.pull-right解决了 Align CheckBox to the right using Bootstrap

Answer 1

使用 .float-right 有效。谢谢@zgood