將復選框標簽移動到引導自定義復選框的左側

Question

我有一個復選框

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

如何移動標簽以顯示在左側？ 我曾嘗試更改訂單，但它只是破壞了復選框功能。

    <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 鏈接以顯示兩個示例

Answer 1

答案似乎不適用於custom-switch 。 這是一個工作示例。

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>

提琴手

https://jsfiddle.net/2cmbq9r0/

編輯：將left:initial更改為left:auto以使其適用於 IE11。

Answer 2

復選框不是實際的<input> （隱藏的）。 這樣做是為了在跨瀏覽器、跨設備上保持一致的樣式，因為<input type="checkbox">目前無法做到這一點。

相反，使用<label>的::before偽元素。

因此，您應該在包裝器上放置一個自定義類（下面示例中的custom-control-right ）並添加一些覆蓋默認值的 CSS：

 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>

注意：您可以替換div.custom-control-right與選擇.custom-control-right ，如果這個代碼解析加載引導CSS以后。 但是，在 SO 上，鏈接的資源是在 CSS 面板中的代碼之后加載的，我不得不過度限定選擇器才能使其工作。

Answer 3

試試看：小提琴

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