Bootstrap 4: 复选框文字在左侧，复选框在右侧

Question

看起来很简单，但我似乎想不出来。我有一个带文本的复选框，我需要文本靠左，复选框在右边。我该怎么做呢？

以下是我的代码：

.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>

- Retros

Answer 1

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

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

- Vipul Singh

---

哦，好的！看起来很有前途，但是我该如何使文本靠左对齐呢？因为现在的情况是这样的：http://pokit.org/get/img/8840fe1f0f4612c98ac16e2d9666d9c9.jpg 等等，我会更新我的代码，请给我一秒钟。 - Retros

简单来说，margin-left: 5px 或更多，我不知道它们应该移动多远。@Retros 如果这是您想要的，请接受答案。 - hansTheFranz

我会接受这个答案，没问题。因为他真正解决了那个问题。谢谢，@VipulSingh。但是你能否现在看一下我的代码片段？ - Retros

你正在使用justify-content-end作为类名，这就是为什么它在右上角。请使用justify-content-start。 - Vipul Singh

是的，我也尝试过那个方法，但由于某种原因它们仍然粘在一起。 - Retros

什么是最终解决方案？正在寻找，但找不到。 - EsseTi

Answer 2

尝试下面的代码，只需将文本放置在标签内

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

- shiva krishna

---

只看到代码片段的输出...为什么帖子被踩了..我能知道原因吗？ - shiva krishna