我在测验样式应用程序中使用引导(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 @R_403_103@ 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;
}
