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

Question

我正在使用 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" })

但是没有用。

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

Answer 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