自動換行不在bootstrap 3中工作

Question

我正在嘗試創建一個按鈕，上面有一些文字。 但是文本沒有包裹在按鈕上。 這就是我所做的。

<div class="form-group">
  <div class="col-md-6 col-sm-6 col-xs-6">
    <input type="radio" id="1" class="hidden">
    <label for="1" class="btn btn-info btn-preference  pull-right">Stability</label> 
  </div>
  <div class="col-md-6 col-sm-6 col-xs-6">
    <input type="radio" id="1" class="hidden">
    <label for="1" class="btn btn-primary btn-preference text-center">
      <span class="break-wo">Freedom and Risk</span>                                                        
    </label> 
  </div>
</div>

這是bootfly的鏈接

Answer 1

它不是包裹，它是white-space: nowrap; 當使用包含white-space: nowrap; .btn時，阻止文本換行white-space: nowrap; 所以使用white-space: normal;

label[for="1"].btn {
    white-space: normal;
}

演示

---

注意：您的ID值無效，您無法使用數字啟動id

Answer 2

你有沒有試過添加white-space: normal; 你的span class="break-wo" ？ 這應該有所幫助。

Answer 3

試試這種方式......

<div class="radio">
 <label class="btn btn-info">
  <input type="radio" id="1" name="optionsRadios" class="hidden" value="option1" checked>
  Option one
 </label>
</div>

在標簽內添加標簽