1

我有一个用于 twitter bootstrap 的切换，其中一个词弹出并且没有留在切换中，我在下面的红色框中突出显示了混乱的词：

在此处输入图像描述

我的代码是：

<div class=\"span9 space\">
                        <h3 class=\"title pull-left\">$name</h3> 

                        <link rel=\"stylesheet\" href=\"lib/prism/prism-light.css\">
                        <script src=\"lib/prism/prism.js\"></script>

                        <link rel=\"stylesheet\" href=\"toggle-switch.css\">


                        <form class=\"form-horizontal pull-right\">
                            <div class=\"control-group\">
                                <label class=\"control-label\"></label>
                                <div class=\"controls btn disabled switch switch-two\">
                                    <input id=\"week9\" name=\"view\" type=\"radio\" checked>
                                    <label for=\"week9\" onclick=\"\">Not Visited</label>

                                    <input id=\"month10\" name=\"view\" type=\"radio\"> 
                                    <label for=\"month10\" onclick=\"\">Visited</label>



                                    <span class=\"slide-button btn btn-warning\"></span>
                                </div>
                            </div>
                        </form>


                    </div>

我正在使用的切换来自这里：

http://ghinda.net/css-toggle-switch/bootstrap.html

这也是我的实时代码：

http://www.beerportfolio.com/breweryPage2.php?id=BSsTGw

4

2 回答 2

1

问题是 Switch 类不适合你的话，

您可以通过硬编码样式表中 switch 类中的宽度或将其添加到要拉伸的 div 中来解决它，这应该可以解决您的问题

<div class=\"controls btn disabled switch switch-two\" style=\"width: xxxpx !important;\">

而 xxx 代表你需要的值

于 2013-03-23T02:28:27.057 回答
0

我对您提供的演示进行了实时编辑，并使用了您的项目值，并添加了比所需宽度更小的宽度，并且“未访问”的已访问部分进入了新行。您可能希望切换项具有更大的宽度。

编辑： 看起来您确实修改了一些 css 或继承了一些 css，您可以随意修改它，但请尝试：toggle-switch line 210

.toggle label,
.toggle p,
.switch label {
    line-height: 13px;/*30px*/
}

并删除：bootstrap.min.css 第 333 行

.form-horizontal .controls {
    margin-left: 0;/*180px*/
}
于 2013-03-23T02:14:40.963 回答