Question

嗨，我在 Bootstrap 4 中使用 Angular8，这里我在其中一个屏幕上使用了复选框，所以复选框先出现，然后标签出现，我需要先给出标签，然后再给出复选框。任何人都可以帮助我使其成为可能吗？

HTML：

<div class="row" [formGroup]="userInfoForm">
  <div class="col pt-lg-4 max-50">
    <label for="" class="font-weight-bold">Permissions</label>
    <div class="row">
      <div class="col-12">
        <div class="form-group custom-control custom-switch ">
          <input type="checkbox" class="custom-control-input" id="DoesUserhaveaccess" formControlName="accesstoCrs">
          <label class="custom-control-label" for="DoesUserhaveaccess">Access? </label>
        </div>
      </div>
    </div>
  </div>
</div>

Label and Toggle

Answer 1

使用一些 CSS，您可以像这样修复它：

更新：如果您不想align带有不同长度的文本的checkboxes，我还将其添加到答案中。

div.custom-control-right .custom-control-label::before,
div.custom-control-right .custom-control-label::after{
  right: -1.5rem;
  left: initial;
  }

.label-align-text {
  display: inline-block;
  width: 100px;
  text-align: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin:20px;">

<div class="row" [formGroup]="userInfoForm">
  <div class="col pt-lg-4 max-50">
    <label for="" class="font-weight-bold">Permissions</label>
    <div class="row">
      <div class="col-12">
        <div class="form-group custom-control custom-switch custom-control-right ">
          <input type="checkbox" class="custom-control-input" id="DoesUserhaveaccess" formControlName="accesstoCrs">
          <label class="custom-control-label" for="DoesUserhaveaccess">Access? </label>
        </div>
      </div>
    </div>
 
  </div>
</div>


<!-- Align checkboxes with different text length -->

<div class="row" [formGroup]="userInfoForm">
  <div class="col pt-lg-4 max-50">
    <label for="" class="font-weight-bold">Permissions</label>
    <div class="row">
      <div class="col-12">
        <div class="form-group custom-control custom-switch custom-control-right ">
          <input type="checkbox" class="custom-control-input" id="DoesUserhaveaccess2" formControlName="accesstoCrs">
          <label class=" label-align-text custom-control-label" for="DoesUserhaveaccess2">Access? </label>
        </div>
      </div>
    </div>
 <div class="row">
      <div class="col-12">
        <div class="form-group custom-control custom-switch custom-control-right ">
          <input type="checkbox" class="custom-control-input" id="DoesUserhaveaccess3" formControlName="accesstoCrs">
          <label  class="label-align-text custom-control-label" for="DoesUserhaveaccess3">Access longer text? </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="form-group custom-control custom-switch custom-control-right ">
          <input type="checkbox" class="custom-control-input" id="DoesUserhaveaccess4" formControlName="accesstoCrs">
          <label class="label-align-text custom-control-label" for="DoesUserhaveaccess4">Access longer text much longer? </label>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

正如您在此 stackblitz forked from yours 中所见，我为 left 和 before 伪元素重新定义了 after 属性。这将开关放在文本之后并对齐所有开关，我在标签容器中添加了一个 width，以便对其中的每个元素都足够大。
这是我发现交换标签和开关的唯一方法。

如何使用 Bootstrap4 在 Angular8 中交换切换和标签的位置

2 个答案: