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

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 类。