Html bootstrap-switch 如何显示大标签文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24865579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-switch how to show large label text
提问by Jibin Mathew
I am using twitter bootstrap-switch plugin in to show a checkbox with two options. It works well for checkboxes with small label text like "yes/no". However, when it comes to bigger label text like "Normal/Abnormal", then part of text is not visible to the user.
我正在使用 twitter bootstrap-switch 插件来显示一个带有两个选项的复选框。它适用于带有“是/否”等小标签文本的复选框。但是，当涉及更大的标签文本（如“正常/异常”）时，用户将看不到部分文本。
I tried to use the data_sizeattribute:
我尝试使用data_size属性：
@Html.CheckBoxFor(model => Model.keyitems[i].Status,
new { @checked = "checked",
@data_on_text = "Normal",
@data_off_text = "Abnormal",
@data_size = "switch-large" })
But it didn't work.
但它没有用。
How can I make the plugin support longer text as well?
如何让插件也支持更长的文本？
回答by KyleMit
First of all, the data attributes use hyphens (-), not underscores (_).
Also "switch-large" is not a permissible value for the sizeoption, which takes the following values:
首先，数据属性使用连字符 ( -)，而不是下划线 ( _)。
此外，“switch-large”不是该size选项的允许值，它采用以下值：
null, 'mini', 'small', 'normal', 'large'
空，“迷你”，“小”，“正常”，“大”
More importantly, a large control doesn't actually do that much to change the allowable size. You'll have to override the control width like this:
更重要的是，大型控件实际上并没有做太多改变允许的大小。您必须像这样覆盖控件宽度：
.bootstrap-switch-large{
width: 200px;
}
All the control widths are based off of percents of their parent, so everything else should still render fine.
所有控件宽度都基于其父级的百分比，因此其他所有内容仍应正常呈现。
<input type="checkbox" class="switch"
data-on-text="normal"
data-off-text="abnormal"
data-size="large" />
Demo in jsFiddle
jsFiddle 中的演示
回答by kjw
Something else to potentially check is jQuery version. I inherited a site that was running an older version and my button sizes were all too small, cutting off the text. Once I used a current version everything started working as it should.
可能要检查的其他内容是 jQuery 版本。我继承了一个运行旧版本的网站，我的按钮尺寸太小，切断了文本。一旦我使用了当前版本，一切都开始正常工作。
回答by ni8mr
Accepted answer is great, i just want to add a reference to a plugin here. I have used it in similar cases. It is BootStrapSwitch. It supports callbacks which is a real perk.
接受的答案很好，我只想在此处添加对插件的引用。我在类似的情况下使用过它。它是BootStrapSwitch。它支持回调，这是一个真正的好处。
