Bootstrap（TB3）不会在bootstrap（TB3）cols中包含按钮文本

Question

我在测验样式应用程序中使用bootstrap（Twitter-Bootstrap 3），我使用bootstrap按钮来获得测验的答案。我的问题是，有时答案很长，而不是将文本包装到按钮所在的col的宽度，文本只是在一行中继续前进并越过col和宽度。有没有一种简单的方法可以解决这个问题（请注意，我可以定义设置宽度作为答案长度的变化）？显示代码有点困难，因为它使用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>

我认为bootstrap应该自动包含div中的按钮文本，但它并不是。我一直在寻找解决方案，但我还没能找到任何能够解决这个问题的方法。任何帮助，将不胜感激。我不想使用<a href='#" ...>，因为按下按钮时页面不会重新加载或重定向很重要。只应调用onclick函数submitAnwers（）而不重定向。

Answer 1

Bootstrap 3中的btn类包含'white-space：no-wrap;'，因此按钮不会包含在多行上。您可以使用简单的CSS覆盖更改此设置，如：

.btn {
    white-space: normal;
}

演示：http://www.bootply.com/90082

Answer 2

这是一个陈旧的问题。答案解决了这个问题，但你可以得到丑陋的单词分词，按钮在一个单词的中间断开，似乎在任何地方都可以。

我的回答强制按钮在单词之间换行，提供一个漂亮，干净，反应灵敏的按钮。

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

希望将来帮助某人。