右對齊 Bootstrap4 切換按鈕

Question

可能以前被問過，但沒有設法找到答案。

我只想右對齊 bootstrap4 切換按鈕。

<ul >
        <li>
            <label for="test1">Small Length Label</label>

            <input id="test1"  class="float-right" style="float: right" checked data-toggle="toggle" type="checkbox" />
        </li>



        <li>
            <label for="test2">Longer__ Length Label   </label>
            <input id="test2" style="float: right" checked data-toggle="toggle" type="checkbox" />

        </li>


        <li>
            <label for="test3">Longer_Longer_Longer Label </label>
            <input id="test3" style="float: right" checked data-toggle="toggle" type="checkbox"  />
        </li>


    </ul>

這是一個顯示當前對齊方式的JSFiddle 。

無論文本長度如何，我都希望切換按鈕位於同一列上。

Answer 1

我會為此使用 flexbox。 只需將以下類添加到ul元素： d-flex flex-column align-items-end 。 並且，可選地，您選擇的寬度。

Answer 2

我想你要找的是<div class="d-flex justify-content-between">

只需像這樣將元素包裹在li ：

<li>
    <div class="d-flex justify-content-between">
      <label for="test1">Small Length Label</label>
      <input id="test1" class="float-right" style="float: right" checked data-toggle="toggle" type="checkbox" />
    </div>
 </li>

在文本和輸入之間留有空格