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>

DEMO

更新后的答案

使用direction: rtl

New Demo

Answer 2

您要在右边的复选框标签吗？见下文：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label pull-right" for="defaultCheck1">
    Default checkbox
  </label>
</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 class="pull-right">
    <label class="form-check-label pull-right" for="defaultCheck1">
    Pulled right label
  </label>
  </div>
</div>

Answer 3

You can achieve with float left on label tag

https://jsfiddle.net/Minal4/y6xv5eas/3/

Answer 4

首先，您必须写标签，然后在输入标签之后，如果存在对齐问题，则将css“ vertical-align：baseline”放入

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

Answer 5

如果您需要直观地更改顺序，可以引入类似 .custom-checkbox-reverse 的内容。

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-checkbox custom-checkbox-reverse">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>

DEMO

Bootstrap-复选框左侧的标签

5 个答案: