1

Twitterのブートストラップに使用しているトグルがあり、単語の1つが飛び出してトグル内にとどまらないため、下の赤いボックスでめちゃくちゃな単語を強調表示しました。

ここに画像の説明を入力

私のコードは次のとおりです。

<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 クラスがあなたの言葉に当てはまらないことです。

スタイルシートのスイッチクラスで幅をハードコーディングするか、ストレッチしたいdivに幅を追加することで解決できます。これで問題が解決するはずです

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

xxx は必要な値を表します

于 2013-03-23T02:28:27.057 に答える
0

提供されたデモでライブ編集を行い、アイテムに値を使用して、必要な幅よりも小さい幅を追加し、「未訪問」の訪問部分が新しい行になりました。トグル アイテムの幅を広くしたい場合があります。

編集: cssの一部を変更したか、一部を継承したようです。好きなように変更できますが、試してみてください:トグルスイッチ行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 に答える