用bootstrap時，使用label為input元素顯示文字時，如果label的文字太多的話，會導致input的元素和文字不在同一行。

先看看最開始的程式碼：

<input type="radio" name="sex" id="male" />
<label for="male">Male</label>

這樣顯示是正常的：

但當我們將label內的文字增多時會發生什麼呢：

radio與label的文字換行了！這並不是我們想要的結果！

我在網上搜索了幾種方法：

使用nowrap="nowrap"標籤
使用white-space:nowrap;屬性

看看示例程式碼：

<form style="white-space:nowrap;">
 
<input type="radio" name="sex" id="male" />
<label for="male">Malessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</label>
 
</form>

結果是：

可行！

但是當我們把這個屬性應用到Bootstrap響應式設計的頁面中去的時候，文字無法自動換行，無法完成響應式的設計！

最後，我根據某位朋友遇到的Bootstrap中圖示與文字無法對齊的問題的解決方案想出來一個辦法：

使用Bootstrap的 col 類，也就是說，給radio元素設定為 col-xs-1 ，給label元素設定為 col-xs-11，然後調整下radio的margin-left和margin-right屬性，完美解決問題！

另附上程式碼：

<div class="col-xs-12 ">
  <input type="radio" name="answer" value="8" id="option-input-4" style="margin-left: -1em; margin-right: -1.2em; " <strong>class="col-xs-1"</strong>>
  <label for="option-input-4" id="option-label-4" style="margin-top: 2px; " <strong>class="col-xs-11"</strong>>D.追求長軸距及寬敞的後排乘坐空間追求長軸距及寬敞的後排乘坐空間追求長軸距及寬敞的後排乘坐空間追求長軸距及寬敞的後排乘坐空間追求長軸距及寬敞的後排乘坐空間</label>

--------------------- 
作者：keifer 
來源：CSDN 
原文：https://blog.csdn.net/keifer/article/details/50285081?utm_source=copy 
版權宣告：本文為博主原創文章，轉載請附上博文連結！