Bootstrap - 复选框左侧的标签

Question

我有一个示例复选框：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

我想在左侧有一个标签。你知道我该怎么做吗？我试过拉右，但它不起作用。

更新：我认为问题在于我在 HTML 标签中使用的 rtl 类。

请看一下http://jsfiddle.net/npjm1gfy/3/

Answer 1

你可以把它们混合起来然后涂一点 margin

.form-check-input-reverse{
 margin-left: 10px;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-check">
<label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
  <input class="form-check-input-reverse" type="checkbox" value="" id="defaultCheck1">
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

演示

更新答案

和 direction: rtl

新演示