css - minhur bootstrap toggle 在模态中不显示全宽，但在其他任何地方都显示

Question

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

代码：

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

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

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

score 1 · Accepted Answer

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

只需用 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 类。

score 0 · Accepted Answer

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

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

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

2 回答 2