Label Text nicht in einem Bootstrap-Grid-Setup Wrapping

Question

Ich versuche, Etiketten zu erhalten, nicht in Bootstrap3 zu wickeln, aber es scheint nicht zu funktionieren.

Ich habe versucht, 'word-wrap: break-word' sogar auf dem Etikett zu platzieren, aber das scheint auch nicht den Satz des Labels zu brechen.

Ich habe in der Dokumentation zu 'Etiketten und Steuerelemente in .form-Gruppe für optimalen Abstand umschließen.' aber ich kann 'form-group' nicht verwenden. Ich denke, wenn ich bootstrap divs verwenden möchte, um das Raster-/Formularlayout der Labels/Antworten separat zu steuern (die Labels/Eingaben sind mobilerer und erweitern auf 100% des Screeners wenn auf xs Bildschirme, aber auf dem Bildschirm sm + erscheinen die Beschriftungen links von der Eingabe, um Platz auf dem Bildschirm zu sparen.

Hier ist ein Beispiel ... Erweitern Sie den rechten Seitenrahmen der JSFiddle sehr groß und dann sehen Sie, dass die Formularbeschriftungen auf der linken Seite mit der richtigen Textausrichtung platziert werden und das Problem dann auftritt.

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

Pic unterhalb des 3. Etikett, das nicht einwickeln:

ist die Basiscode I für dieses Label/Eingabe-Setup verwenden:

<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

Wenn Sie die DOM-Elemente in Ihrem Fiddle schauen durch werden Sie diesen Code für das label sehen:

.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; 
} 

einfach die Eigenschaft entfernen oder die white-space: nowrap; oder setzen Sie die Eigenschaft auf normal überschreiben

Update: Nur um zu verdeutlichen, diese CSS-Eigenschaft existiert nur in Bootstrap v3. In v4.x wurde die white-space-Eigenschaft aus label Elementen entfernt.

Answer 2

dieses Add zum Etikett

label { 
    white-space: normal; 
} 

Beispiel arbeiten: http://jsfiddle.net/nud64aq7/4/

Answer 3

Versuchen Sie, den Text wrap? Wenn ja, fügen Sie

white-space:normal; 

zum Label-Klasse.

http://jsfiddle.net/kswdusL6/