Question

看起来很简单，但我似乎无法弄明白。我有一个带文字的复选框，我需要文本站在左边，右边是复选框。我怎么能这样做？

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将位置属性添加到custom-control-indicator。

的样式中

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

Answer 2

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

中

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

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

2 个答案: