Bootstrap 4：左侧的复选框文本，右侧的复选框答案

【问题标题】：Bootstrap 4: Checkbox text on the left, checkbox on the rightBootstrap 4：左侧的复选框文本，右侧的复选框
【发布时间】：2020-12-25 19:06:31
【问题描述】：

这似乎很简单，但我似乎无法弄清楚。我有一个带有文本的复选框，我需要文本站在左边，右边的复选框。我该怎么做？

这是我的代码：

.custom-control-description {
  color: #009fff;
  text-transform: uppercase;
}
.custom-checkbox .custom-control-indicator {
  border-radius: 0;
  border: 2px solid #cdc9ca;
  background: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<form>
<div class="checkbox-wrap d-flex justify-content-end p-2 mb-2">
  <label class="custom-control custom-checkbox">
    <span class="custom-control-description">All Pages</span>
  <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
</label>
</div>
</form>

【问题讨论】：

标签： css twitter-bootstrap checkbox bootstrap-4

【解决方案1】：

为custom-control-indicator的样式添加位置属性。

 .custom-checkbox .custom-control-indicator {
    position: relative;
    border-radius: 0;
    border: 2px solid #cdc9ca;
    background: #fff;
 }

【讨论】：

哦，好吧！这看起来很有希望，但是我怎样才能让文本转到最左边，因为现在正在发生这种情况：pokit.org/get/img/8840fe1f0f4612c98ac16e2d9666d9c9.jpg 等等，我会更新我的代码，等一下。
简单地说margin left: 5px或更多我不知道他们应该移动多远。 @Retros 如果这是您想要的，请接受答案。
我会接受答案，没问题。因为他真的解决了这个问题。谢谢，@VipulSingh。但是你现在可以看看我的sn-p吗？
你使用justify-content-end作为一个类，这就是它在右上角的原因。使用justify-content-start。
是的，我也试过那个，但由于某种原因它们仍然粘在一起。

【解决方案2】：

试试下面的代码，把文字放在标签里面

  <label >
        <span>Text goes here....</span>
    </label>
    <input type="checkbox" class="custom-control-input">

【讨论】：

只看sn-p输出...为什么帖子被否决了..我能知道原因吗？？？