css 标签与 Bootstrap 切换左侧对齐

ubof19bj  于 2023-03-05  发布在  Bootstrap
关注(0)|答案(5)|浏览(180)

我使用bootstrap toggle创建如下开关:

<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-toggle="toggle" checked="checked" />
            Toggle Text Right
        </label>
    </div>

    <div class="checkbox">
        <label>
            Toggle Text Left
            <input type="checkbox" data-toggle="toggle" />
        </label>
    </div>
</form>

有没有办法把标签移到开关的左边?我试过把文本放在输入之前,但它不太合适。
http://jsfiddle.net/sjxd1vpt/2/

xxls0lw8

xxls0lw81#

或者,如果不特别需要label标记,则可以使用范围。

<form>
<div class="checkbox">
    <input type="checkbox" data-toggle="toggle" checked="checked" />
    <span>
        Toggle Text Right
    </span>
</div>

<div class="checkbox">
    <span>
        Toggle Text Left
    </span>
    <input type="checkbox" data-toggle="toggle" />
</div>

q8l4jmvw

q8l4jmvw2#

引导切换css似乎有一个左边距:-20像素;
只需向所需的左标签添加一个定制类,如下所示。

.left .toggle {
  margin-left: 5px;
}

这将保持Bootstrap-Toggle预期的结构,以防它们绑定了样式,例如:

label input {
  // some input targeted styling
}

http://jsfiddle.net/sjxd1vpt/5/

mzsu5hc0

mzsu5hc03#

您应该使用引导container-fluid Package 器来实现这种效果。

<form>
<div class="checkbox container-fluid" >
    <label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
        Toggle Text Right
    </label>
</div>

<div class="checkbox container">
    <label>
        Toggle Text Left

    </label>
    <input type="checkbox" data-toggle="toggle" />
</div>

2jcobegt

2jcobegt4#

缺省情况下,Bootstrap会将float: left添加到.form-check-input
只需使用float: none覆盖此设置,并将标签放在html中的输入之前。

a1o7rhls

a1o7rhls5#

label标记应该在input标记之前结束。

<form>
    <div class="checkbox">
        <label> Toggle Text Right </label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
    </div>

    <div class="checkbox">
        <label> Toggle Text Left </label>
        <input type="checkbox" data-toggle="toggle" />
    </div>
</form>

这样可以防止按钮切换与文本重叠。
此处为:http://jsfiddle.net/sjxd1vpt/4/

相关问题