2013-10-19 64 views
0

我在Twitter Bootstrap2中执行表单时遇到问题。CSS Twitter引导表格

我已经成立了一个JS小提琴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> 

我试图将3个选择与控制水平跨越一个div标签。它看起来英文很好,标签很短。但是,最终这是一个以多种语言交付的网站,如果标签变长(如在中间选择器中),则标签文本与其旁边的文本重叠。我如何获得文字换行?

我试着添加最大宽度:100%,根据另一个答案,并没有工作。也许我把标签,而不是标签标签...

谢谢你的任何建议。

回答

2

使用word-wrap属性打破了一句话:

.control-label { 
    word-wrap: break-word; 
}