ブートストラップ（TB3）はブートストラップ（TB3）の中にボタンテキストをラップしません。

Question

私はクイズスタイルのアプリケーションでブートストラップ（Twitter-Bootstrap 3）を使用しており、クイズの回答にはブートストラップボタンを使用します。私の問題は、答えがかなり長いことがあり、ボタンが配置されているcolの幅にテキストをラップする代わりに、テキストがそのまま1行に入り、colとwidthを超えてしまうことです。これを修正する簡単な方法はありますか（回答の長さが変わるにつれて幅を設定することはできません）。コードを表示することは、解答ボタンを移入するために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> 

私は、ブートストラップを自動的にdiv要素内のボタンのテキストをラップする必要があると思うだろうが、それはしていません。私は解決策を探していましたが、特にこの問題をカバーするものは何も見つかりませんでした。どんな助けもありがとう。 <a href='#" ...>を使用したくないのは、ボタンを押したときにページがリロードされたりリダイレクトされたりすることが重要なためです。リダイレクトなしでonclick関数submitAnwers（）のみを呼び出す必要があります。

Answer 1

ブートストラップ3のbtnクラスには 'white-space：no-wrap;'が含まれているため、ボタンは複数の行に折り返されません。

.btn { 
    white-space: normal; 
} 

デモ：http://www.bootply.com/90082

Answer 2

これは古い答えと古い質問ですあなたは、このような単純なCSSオーバーライドを使用して変更することができます。その答えは問題を解決しますが、単語の真ん中でボタンが壊れて見栄えの悪い単語区切りを得ることができます。

私の答えは、言葉の間にボタンを重ねるようにしてくれました。いい、きれいで反応の良いボタンを提供しました。

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

今後誰かを助けることを願っています。