Nhãn văn bản không gói trong thiết lập lưới Bootstrap

Question

Tôi đang cố gắng để có được nhãn không bọc trong Bootstrap3 nhưng dường như không thể làm cho nó hoạt động.

Tôi đã thử đặt 'từ bọc: từ ngắt' ngay cả trên nhãn nhưng điều đó dường như không làm hỏng câu của nhãn.

Tôi đã xem trong tài liệu để 'Bám nhãn và điều khiển trong nhóm .form cho khoảng cách tối ưu.' nhưng tôi không thể sử dụng 'form-group' tôi nghĩ nếu tôi muốn sử dụng div bootstrap để điều khiển bố trí lưới/biểu mẫu của nhãn/câu trả lời riêng biệt (nhãn/đầu vào thân thiện với thiết bị di động hơn và mở rộng tới 100% trình kiểm tra khi xs màn hình, nhưng trên màn hình sm + các nhãn hiển thị bên trái của đầu vào để tiết kiệm không gian màn hình).

Dưới đây là ví dụ ... Mở rộng khung bên phải của jsfiddle rất lớn và sau đó bạn thấy các nhãn biểu mẫu được đặt ở bên trái với căn phải văn bản và sự cố xảy ra sau đó.

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

Pic dưới đây của nhãn 3rd mà không quấn:

Đây là mã cơ bản tôi sử dụng cho rằng thiết lập nhãn/input:

<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

Nếu bạn xem xét thông qua các yếu tố DOM trong Fiddle của bạn, bạn sẽ thấy mã này cho 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; 
} 

Chỉ cần loại bỏ tài sản hoặc ghi đè lên white-space: nowrap; hoặc thiết lập thuộc tính để normal

Cập nhật: Chỉ cần làm rõ thuộc tính CSS này chỉ tồn tại trong Bootstrap v3. Trong v4.x, thuộc tính white-space đã bị xóa khỏi các phần tử label.

Answer 2

thêm này vào nhãn

label { 
    white-space: normal; 
} 

Ví dụ làm việc: http://jsfiddle.net/nud64aq7/4/

Answer 3

Bạn đang cố gắng tạo đoạn văn bản ? Nếu vậy, thêm

white-space:normal; 

đến lớp nhãn.

http://jsfiddle.net/kswdusL6/