Question

我想使用Bootstrap Toggle插件，但在较长文本的模式中没有按预期显示。 JSFiddle

代码：

<input type="checkbox" name="toggle-checkbox" checked>
$("[name='toggle-checkbox']").bootstrapToggle({
   on: 'Enabled',
   off: 'Disabled'
});

还有另一个名为Bootstrap Switch的插件，可以产生所需的结果。

但是第二个插件使用了更多的空间，因此我想让第一个插件工作。两个插件的JSFiddle：JSFiddle

Answer 1

问题是按钮在预期模态中的宽度值是错误的。

使用div包装输入并为该div指定一个自定义CSS类。然后，您可以轻松地选择切换并通过CSS设置样式，以便保留94px的宽度。

请记住，按钮旁边应显示的所有内容现在也必须位于该div内。或者您当然也可以根据需要自定义新的切换类。

HTML：

<div class="toggling">
  <input type="checkbox" name="toggle-checkbox" checked>
</div>

CSS：

.toggling > .toggle {
  width: 94px !important
}

<强>更新

另一种选择，也许更好的选择是简单地通过API文档建议的数据属性设置宽度。

<input type="checkbox" name="toggle-checkbox" checked data-width=94>

现在您甚至不必处理自定义CSS类。

Answer 2

隐藏元素的计算宽度可能有问题。我的解决方法是在每次打开模态时通过调用 bootstrapToggle() 来销毁切换并重新启动它。

$('#myModal').on('shown.bs.modal', function () {
  $('#myToggle').bootstrapToggle('destroy');
  $('#myToggle').bootstrapToggle({ .. options ..});
})

希望这也适用于模态，我仅针对引导标签窗格对其进行了测试，其中存在类似问题。