label文字太多导致与控件换行的问题

用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>
</div>