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>

在文本和输入之间留出空间

右对齐Bootstrap4切换按钮

2 个答案: