Ich habe ein Kontrollkästchen

<div class="custom-control custom-checkbox custom-control-inline">
   <input type="checkbox"  id="location"  v-model="checkedLocations"   value="location" name="customRadioInline1" class="custom-control-input">
   <label class="custom-control-label" for="location"> Option 1</label>
</div>

Wie verschiebe ich das Etikett, um es links anzuzeigen? Ich habe versucht, die Reihenfolge zu ändern, aber es unterbricht nur die Kontrollkästchenfunktion.

    <div class="custom-control custom-checkbox custom-control-inline">
         <label class="custom-control-label" for="location2"> Option 2</label>
        <input type="checkbox"  id="location2"  value="location2" name="custom2" class="custom-control-input">
   </div>

CODEPEN Link, um beide Beispiele zu zeigen

5
JaChNo 18 Jän. 2019 im 15:40

3 Antworten

Beste Antwort

Das Kontrollkästchen ist nicht das tatsächliche <input> (das ist ausgeblendet). Dies geschieht, um es browser- und geräteübergreifend zu gestalten, da dies für <input type="checkbox"> derzeit nicht möglich ist.

Stattdessen wird das ::before Pseudoelement des <label> verwendet.

Daher sollten Sie eine benutzerdefinierte Klasse in den Wrapper einfügen (custom-control-right im folgenden Beispiel) und CSS hinzufügen, das die Standardeinstellung überschreibt:

div.custom-control-right {
  padding-right: 24px;
  padding-left: 0;
  margin-left: 16px;
  margin-right: 0;
}
div.custom-control-right .custom-control-label::before,
div.custom-control-right .custom-control-label::after{
  right: -1.5rem;
  left: initial;
}
<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="custom-control custom-checkbox custom-control-inline custom-control-right">
        <input type="checkbox"  id="location"     value="location" name="custom1" class="custom-control-input">
       <label class="custom-control-label" for="location"> Option 1</label>
    </div>
  
    <div class="custom-control custom-checkbox custom-control-inline custom-control-right">
         <input type="checkbox"  id="location2"  value="location2" name="custom2" class="custom-control-input">
        <label class="custom-control-label" for="location2"> Option 2</label>
   </div>
</div>

Hinweis: Sie können den div.custom-control-right Selektor durch .custom-control-right ersetzen, wenn dieser Code nach Laden von Bootstrap-CSS analysiert wird. Auf SO werden die verknüpften Ressourcen jedoch nach dem Code im CSS-Bereich geladen, und ich musste den Selektor überqualifizieren, damit er funktioniert.

7
tao 18 Jän. 2019 im 12:54

Probieren Sie es aus: Fiddle

<div style="margin:20px;">
  <div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" id="location" value="location" name="custom1" class="custom-control-input">
    <label class="custom-control-label" for="location"> Option 1</label>
  </div>

  <div class="custom-control custom-checkbox custom-control-inline">

    <input type="checkbox" id="location2" value="location2" name="custom2" class="custom-control-input">
    <label class="custom-control-label" for="location2"> Option 2</label>
  </div>
</div>

CSS:

.custom-checkbox {
  padding-left: 0;
}

label.custom-control-label {
  padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
  right: 0;
  left: auto;
}
1
Abhineet 18 Jän. 2019 im 13:51

Die Antworten scheinen nicht mit custom-switch zu funktionieren. Hier ist ein Arbeitsbeispiel.

CSS

div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
    right: -1.5rem;
    left: auto;
}
div.custom-control-right .custom-control-label::before {
    right: -2.35rem;
    left: auto;
}

HTML

<div class="custom-control custom-control-right custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>

JsFiddle

https://jsfiddle.net/2cmbq9r0/

Bearbeiten: left:initial wurde in left:auto geändert, damit es mit IE11 funktioniert.

1
lofihelsinki 3 Dez. 2019 im 14:34