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

Answer 2

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

Answer 3

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