100%宽度的Bootstrap切换按钮

Question

我正在使用 Bootstrap 切换插件（链接），我想知道如何设置宽度为 100%，并与 btn-block 一样占据父元素的所有空间。现在我只能使用像素值来设置宽度。

$('.toggle').bootstrapToggle({
    on: 'Y',
    off: 'N',
    width: ONLY FIXED SIZE IN PX,
    size: 'small'
});

我尝试创建一个自定义类，但没有成功。

<div class="row">
    <div class="col-md-2">
        <input type="checkbox" class="toggle" name="cb1" value="1">
    </div>
    <div class="col-md-3">
        <input type="checkbox" class="toggle" name="cb2" value="1">
    </div>
    <div class="col-md-4">
        <input type="checkbox" class="toggle" name="cb3" value="1">
    </div>
</div>

How could I do? Thank you

- Paolo Rossi

---

你想将输入框的宽度设置为100%吗？ - Shakir Khan

Answer 1

您可以直接以％度量单位给出width，而不仅仅是固定的像素。因此，您可以更改代码，使其看起来像这样。

$('.toggle').bootstrapToggle({
    on: 'Y',
    off: 'N',
    width: '100%',
    size: 'small'
});

您也可以从.bootstrapToggle()方法中删除width参数，并在HTML中使用如下方式。

<input type="checkbox" class="toggle" name="cb1" value="1" data-width="100%">

- Nikhil Nanjappa

---

无法在此插件中使用宽度%。 - Paolo Rossi

我似乎在这里使用了它。请查看我的Codepen - Nikhil Nanjappa

非常奇怪，在我的项目中不起作用.. 我会再次检查。谢谢。 - Paolo Rossi

尝试查看您的jQuery是否被调用。还要检查我的codepen，了解使用的JS和CSS资源。我还提到了一种替代方法来更新我的答案。 - Nikhil Nanjappa

我找到了错误！在我的代码中，我有<label class="checkbox-inline"><input type="checkbox"...></label>。现在我已经删除了它，它可以工作了！谢谢。 - Paolo Rossi