標籤文本不包裹在Bootstrap網格設置

Question

我想讓標籤不包裹在Bootstrap3中，但似乎無法讓它工作。

即使在標籤上，我也嘗試過放置'自動換行：斷字'，但這似乎並沒有打破標籤的句子。

我在文檔中看到'將標籤和控件封裝在.form-group中以獲得最佳間距。'但我不能使用'form-group'，我想如果我想使用引導程序div來分別控制標籤/答案的網格/表單佈局（標籤/輸入移動更友好，並且在xs上擴展到篩選器的100％屏幕上，但在sm +屏幕上，標籤顯示在輸入的左側以節省屏幕空間）。

下面是一個例子...展開jsfiddle的右側邊框非常大，然後您會看到表單標籤放置在左側，右側文本對齊，然後出現問題。

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

產品圖下面的第三標籤不換行：

下面是基本的代碼，我使用該標籤/輸入設置：

<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

如果你通過你的小提琴的DOM元素，你將看到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; 
} 

只需卸下財產或覆蓋white-space: nowrap;或屬性設置爲normal

更新：只是澄清這個CSS屬性只存在於Bootstrap v3中。在v4.x中，white-space屬性已從label元素中刪除。

Answer 2

添加此到標籤

label { 
    white-space: normal; 
} 

例如工作： http://jsfiddle.net/nud64aq7/4/

Answer 3

你想讓文字換行嗎？ 如果是這樣，添加

white-space:normal; 

的標籤類。爲解釋

http://jsfiddle.net/kswdusL6/