Html 引导（TB3）不会在引导（TB3）列中包装按钮文本

我在一个问答式应用程序中使用引导（Twitter引导3），我使用引导按钮来回答问答。我的问题是，有时答案很长，而不是将文本包装到按钮所在的列的宽度，文本只是保持在一行中，并越过列和宽度。有没有一种简单的方法来解决这个问题（注意，我不能定义答案长度变化时的集合宽度）？显示代码有点困难，因为它使用javascript填充答案按钮，但我将显示一个屏幕截图和结果填充的HTML（在javascript填充问题和答案之后）：

以下是生成的HTML：

<div class="row">
 <div style="float: none; margin: 0 auto;" class="col-sm-7">
    <div class="panel panel-default">
        <div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
        <div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text.  Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
        <div class="panel-footer clearfix">
            <div class="row">
                <div class="col-sm-1" id="submit"></div>
                <div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
            </div>
        </div>
    </div>
</div>

小测验4-这是小测验4的描述
代码：80559

说明：根据提供的正确答案，从文本中选择正确给出所需证据的答案选项。一旦计时器停止，你将被迫进入下一个问题。

问题：用幽默的语言表达消极情绪
负面情绪：你不能付钱让我看那部电影……这就是我的感受/幽默用语：没有海滩的海滩阅读，没有机场的机场阅读……

负面情绪：他们只是时间不对/幽默用语：他们没有一个短篇小说的压缩能量

---

我认为引导应该自动将按钮文本包装在div中，但事实并非如此。我一直在寻找解决方案，但我还没有找到任何能特别解决这个问题的方法。任何帮助都将不胜感激。我不想使用引导3中的

btn

类包含“空白：无换行；”，因此，按钮不会缠绕在多行上。您可以使用简单的CSS覆盖来更改此设置，如：

.btn {
    white-space: normal;
}

---

演示：

这是一个带有旧答案的老问题。答案可以解决这个问题，但是你可以得到一个难看的单词分词，其中按钮在单词的中间断开，似乎它想要的任何地方。 我的回答迫使按钮在单词之间缠绕，提供了一个漂亮、干净、响应迅速的按钮

.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}
<a href="#" class="btn btn-primary btn-responsive">Click Here</a>

.btn响应{
空白：正常！重要；
单词包装：打断单词；
}

---

希望这对将来的人有帮助。

这很简单，谢谢。你可能会认为这是默认设置。是的，我确信非包装按钮背后有一个原因，但我不清楚为什么这不是默认设置。在泰语中，单词之间没有空格，这会对UI/按钮设计提出挑战。我们如何在不去论坛的情况下找出这些问题？文档并不总是清楚这一点。因此，基于其他人已经拥有并解决了与您相同的问题，这是一个很好的资源来找到您的答案。对一个解决了你问题的SO问题发表评论，将给你一种稍后回来并找到它的方法。-你也应该把笔记放在某个地方，无论是在真正的笔记本上还是在文本文档中。你不想继续研究你几个月前已经解决但现在却忘记的事情。在原始答案的基础上有了很大的改进。谢谢！有一个问题，按钮文本会从btn默认溢出，添加这个解决了它