自动换行在引导程序 3 中不起作用答案

【问题标题】：Word-wrap not working in bootstrap 3自动换行在引导程序 3 中不起作用
【发布时间】：2014-02-15 09:45:47
【问题描述】：

我正在尝试创建一个上面有一些文本的按钮。但是文本没有环绕在按钮上。这是我所做的。

<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>

这里是Link for bootfly

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

不是换行，而是white-space: nowrap;，它在使用.btn 时阻止文本换行，其中包含white-space: nowrap;，所以使用white-space: normal;

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

Demo

注意：您的ID 值无效，您不能以数字开头的id

【讨论】：

先生。外星魔法又来了
非常感谢，它成功了，一旦网站允许，我会将其标记为答案。
+1。顺便说一句，为什么 Bootstrap “喜欢” 使用 white-space: nowrap; 属性？我认为这违反了响应原则。我想了解其中的逻辑：例如，当我想创建响应式表时，Bootstrap 文档建议使用 table-responsive 类 (getbootstrap.com/css/#tables-responsive) 提供的元素包装 <table>。在这种情况下，使用了nowrap 属性，这导致在手机上查看页面时无法看到单元格的整个文本（仅当我可以滚动时）。
使用white-space: normal;，文本将在必要时换行，这在我看来使其更具“响应性”。示例：第一种情况：bootply.com/render/BtzTkf1jcn（和结果（在三星 Galaxy S Advance，Android 的内置浏览器上）：i.imgur.com/CXhvaCQ.png），第二种情况：bootply.com/render/b55Sy7gfTz（和结果：i.imgur.com/VCbUl5z.png）。当文本永远不会换行时，后者（使用nowrap）如何“响应”？

【解决方案2】：

您是否尝试将white-space: normal; 添加到您的span class="break-wo"？这应该会有所帮助。

【讨论】：

【解决方案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>

在标签内添加标签

【讨论】：