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

Question

我正在使用twitter bootstrap-switch插件显示一个带有两个选项的复选框.它适用于带有小标签文本的复选框,如"是/否".但是,当涉及更大的标签文本(如"正常/异常")时,部分文本对用户不可见.

我试图使用该data_size属性:

@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" />

在jsFiddle演示