Bootstrap 4: Checkbox Text auf der linken Seite, Checkbox auf der rechten Seite

Question

Es scheint einfach, aber ich kann es nicht herausfinden. Ich habe ein Kontrollkästchen mit Text, und ich brauche den Text auf der linken Seite, Kontrollkästchen auf der rechten Seite. Wie kann ich das machen?

Hier ist mein Code:

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

Answer 1

hinzufügen Position Attribut auf das Styling von custom-control-indicator.

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

Answer 2

versuchen, den Code unten, legen Sie einfach den Text im Inneren des Etiketts

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