Bootstrap (TB3) не обертывает текст кнопки в бутстрап (TB3) cols

Я использую bootstrap (Twitter-Bootstrap 3) в приложении стиля викторины, и я использую кнопки начальной загрузки для ответов на викторину. Моя проблема заключается в том, что иногда ответы довольно длинные, и вместо того, чтобы обертывать текст шириной 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 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() должна быть вызвана без перенаправления.

Ответ 1

Класс btn в Bootstrap 3 содержит "white-space: no-wrap;", поэтому кнопки не будут обматываться по нескольким строкам. Вы можете изменить это с помощью простого CSS-переопределения, например:

.btn {
    white-space: normal;
}

Демо: http://www.bootply.com/90082

Ответ 2

Это старый вопрос со старым ответом. Ответ решает проблему, но вы можете получить уродливые разрывы слов, где кнопка разбивается посередине слова, казалось бы, где бы он ни захотел.

Мой ответ заставляет кнопку обертываться между словами, обеспечивая приятную, чистую и отзывчивую кнопку.

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

Надеюсь, что это поможет кому-то в будущем.