我在测验样式应用程序中使用引导(Twitter-Bootstrap 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>
我会认为bootstrap应该自动包装在div中的按钮文本,但是它不会.我一直在寻找解决方案,但是我还没有找到涵盖这个问题的东西.任何帮助将不胜感激.我不想使用< a href ='#“...>因为重要的是页面不会被重新加载或按下按钮被重定向.只有onclick函数submitAnwers()应该被调用没有重定向.
解决方法
Bootstrap 3中的btn类包含’white-space：no-wrap”,因此按钮不会包含多行.您可以使用简单的CSS覆盖更改它,如：
.btn {
white-space: normal;
}
