bootstrap-switch 如何显示大标签文本答案

【问题标题】：bootstrap-switch how to show large label textbootstrap-switch 如何显示大标签文本
【发布时间】：2014-07-21 12:51:44
【问题描述】：

我正在使用 twitter bootstrap-switch 插件来显示一个带有两个选项的复选框。它适用于带有小标签文本（如“是/否”）的复选框。但是，当涉及到较大的标签文本（例如“正常/异常”）时，部分文本对用户是不可见的。

我尝试使用data_size attribute：

@Html.CheckBoxFor(model => Model.keyitems[i].Status,
                  new { @checked = "checked",
                        @data_on_text = "Normal",
                        @data_off_text = "Abnormal",
                        @data_size = "switch-large" })

但它没有用。

如何让插件也支持更长的文本？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-switch

【解决方案1】：

首先，数据属性使用连字符（-），而不是下划线（_）。
此外，“switch-large”不是size 选项的允许值，它采用以下值：

null、'mini'、'small'、'normal'、'large'

更重要的是，一个大的控件实际上并不能改变允许的大小。您必须像这样覆盖控件宽度：

.bootstrap-switch-large{
    width: 200px;
}

所有控件的宽度都基于其父控件的百分比，因此其他所有内容仍应正常渲染。

<input type="checkbox" class="switch"
       data-on-text="normal"
       data-off-text="abnormal"
       data-size="large" />

Demo in jsFiddle

【讨论】：

【解决方案2】：

可能要检查的其他内容是 jQuery 版本。我继承了一个运行旧版本的网站，我的按钮尺寸太小了，切断了文本。一旦我使用了当前版本，一切都开始正常工作了。

【讨论】：

【解决方案3】：

接受的答案很好，我只想在此处添加对插件的引用。我在类似的情况下使用过它。它是BootStrapSwitch。它支持回调，这是一个真正的好处。

【讨论】：