Il testo dell'etichetta non viene inserito in una configurazione di griglia Bootstrap

Question

Sto cercando di far sì che le etichette non si avvolgano in Bootstrap3 ma sembra che non riescano a farlo funzionare.

Ho provato a mettere "word-wrap: break-word" anche sull'etichetta, ma ciò non sembra infrangere la frase dell'etichetta.

Ho visto nella documentazione di "Avvolgere etichette e controlli in .form-group per una spaziatura ottimale". ma non posso usare 'form-group' penso che se voglio usare i div di bootstrap per controllare il layout di griglia/modulo delle etichette/risposte separatamente (le etichette/gli input sono più mobili e si espandono al 100% dello screener quando su xs schermate, ma su schermo sm + le etichette vengono visualizzate a sinistra dell'input per risparmiare spazio sullo schermo).

Ecco un esempio ... Espandi destra telaio laterale del jsfiddle molto grande e poi si vede le etichette di forma vengono immessi sul sinistro con destro del testo-allineamento e la questione si verificano poi.

http://jsfiddle.net/armyofda12mnkeys/nud64aq7/

Pic al di sotto del 3 ° un'etichetta che non va a capo:

Ecco il codice di base che uso per l'installazione che l'etichetta/Ingresso:

<div class="col-xs-12 col-sm-4 label"> 
    <label for="firstname">House Number and Street and longer label and longer label and longer label and longer label and longer label </label> 
</div> 
<div class="col-xs-12 col-sm-8 answer"> 
    <input type="text" class="form-control" placeholder="Enter your house # here" /> 
</div> 

Answer 1

Se si guarda attraverso gli elementi DOM nel Fiddle si vedrà questo codice per la label:

.label { 
    display: inline; 
    padding: .2em .6em .3em; 
    font-size: 75%; 
    font-weight: 700; 
    line-height: 1; 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: baseline; 
    border-radius: .25em; 
} 

Basta rimuovere la proprietà o sovrascrivere il white-space: nowrap; o impostare la proprietà a normal

Aggiornamento: Giusto per chiarire questa proprietà CSS esiste solo in Bootstrap v3. In v4.x la proprietà white-space è stata rimossa dagli elementi label.

Answer 2

aggiungere questo all'etichetta

label { 
    white-space: normal; 
} 

esempio funzionante: http://jsfiddle.net/nud64aq7/4/

Answer 3

Stai cercando di rendere il testo a capo? Se è così, aggiungere

white-space:normal; 

alla classe etichetta.

http://jsfiddle.net/kswdusL6/