How can I disable the label of the bootstrap switcher?

时间:2015-10-29 15:58:17

标签: css twitter-bootstrap

I am using the bootstrap switcher:

http://www.bootstrap-switch.org/examples.html

And I would like to set the label width to 0 because I only want to see ON and OFF, not the white label between. But if I set label width to 0 there is still some pixel of the white label visible. Do you know a trick to change this? Happy about any help!

<input id="switch-labelWidth" type="checkbox" data-label-width="0">

what i want to remove


UPDATE:

   <link href="http://www.bootstrap-switch.org/docs/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.bootstrap-switch.org/docs/css/highlight.css" rel="stylesheet">
    <link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <link href="http://www.bootstrap-switch.org/docs/css/main.css" rel="stylesheet">

<input id="switch-labelWidth" type="checkbox" data-label-width="100">


   <script src="http://www.bootstrap-switch.org/docs/js/jquery.min.js"></script>
    <script src="http://www.bootstrap-switch.org/docs/js/bootstrap.min.js"></script>
    <script src="http://www.bootstrap-switch.org/docs/js/highlight.js"></script>
    <script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
    <script src="http://www.bootstrap-switch.org/docs/js/main.js"></script>

1 个答案:

答案 0 :(得分:2)

我认为你不能使用插件选项,但你可以使用一些CSS技巧来做到这一点:

.bootstrap-switch-label {
    width: 0px ;
    padding: 0px ;
}

.bootstrap-switch-wrapper {
    width: 55px ; // You may need to change this if you do not use the "normal" size
}