0

Twitter Bootstrap2 でフォームの実装に問題があります。

JS Fiddle http://jsfiddle.net/manishap/WNSCW/15/をセットアップしました

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

<div class="container">
<div id="ratingSubectives" class="row-fluid">
    <form class="well" >
        <fieldset>
            <div class="control-group span3">
                <label class="control-label" for="select01">Aaaaaaaaaaaa</label>
                <div class="controls"><select id="select01">
                    <option value=""></option>
                    <option value="A">A</option>
                    <option selected="selected" value="B">B</option>
                    <option value="C">C</option>
                </select></div>
            </div>
            <div class="control-group span3">
                <label class="control-label" for="select02">Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</label>
                <div class="controls"><select id="select02">
                    <option></option>
                    <option selected="selected" value="A">B</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select></div>
            </div>
            <div class="control-group span3">
                <label class="control-label" for="select03"><a href="#">Ccccccccccc</a></label>
                <div class="controls"><select id="select03" disabled>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option selected="selected" value="C">C</option>
                </select></div>
            </div>
            <div class="control-group span3">
                <label class="control-label" for="select03">&nbsp;</label>
                <div class="controls"><button type="submit" class="btn">Submit</button></div>
            </div>
        </fieldset>
    </form>             
 </div>

div に水平にラベルが付いた 3 つの選択コントロールを配置しようとしています。短いラベルを使用すると、英語で正しく表示されます。しかし、最終的にこれは多言語で配信されるサイトになり、ラベルが長くなると (中間のセレクターのように)、ラベルのテキストがその隣のテキストと重なってしまいます。テキストを折り返すにはどうすればよいですか?

別の回答に従って max-width: 100% を追加しようとしましたが、うまくいきませんでした。たぶん、ラベルタグの代わりにdivにラベルを入れます...

提案をありがとう。

4

1 に答える 1

2

属性を使用しword-wrapて単語を分割します。

.control-label {
  word-wrap: break-word;
}
于 2013-10-19T01:14:15.333 に答える