右对齐 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>

在文本和输入之间留有空格