बूटस्ट्रैप (टीबी 3) बूटस्ट्रैप (टीबी 3) कोल्स में बटन टेक्स्ट लपेटता नहीं है

Question

मैं एक प्रश्नोत्तरी शैली अनुप्रयोग में बूटस्ट्रैप (ट्विटर-बूटस्ट्रैप 3) का उपयोग कर रहा हूं और मैं प्रश्नोत्तरी के उत्तरों के लिए बूटस्ट्रैप बटन का उपयोग करता हूं। मेरी समस्या यह है कि कभी-कभी उत्तर काफी लंबा होते हैं, और पाठ को उस कॉल की चौड़ाई तक लपेटने के बजाय बटन को रखा जाता है, पाठ केवल एक पंक्ति में जा रहा है और कॉल और चौड़ाई पर जाता है। क्या इसे ठीक करने का कोई आसान तरीका है (ध्यान दें कि मैं सेट चौड़ाई को परिभाषित करने की लंबाई के रूप में निर्धारित चौड़ाई निर्धारित नहीं कर सकता)? कोड दिखा रहा है, थोड़ा मुश्किल है के रूप में यह जावास्क्रिप्ट का उपयोग करता है इस सवाल का जवाब बटन को भरने के लिए है, लेकिन मैं एक स्क्रीन शॉट और परिणामस्वरूप आबादी वाले HTML दिखाएगा (के बाद जावास्क्रिप्ट सवाल और जवाब आबादी है):

यहाँ जिसके परिणामस्वरूप 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='#" ...> का उपयोग नहीं करना चाहता क्योंकि यह महत्वपूर्ण है कि पृष्ठ को फिर से लोड न किया जाए या बटन दबाए जाने पर पुनर्निर्देशित किया जाए। केवल ऑनक्लिक फ़ंक्शन सबमिट करेंअनुवर() को रीडायरेक्ट के साथ कॉल किया जाना चाहिए।

Answer 1

btn बूटस्ट्रैप 3 में कक्षा में 'व्हाइट-स्पेस: नो-रैप' है, इसलिए बटन mutliple लाइनों पर लपेट नहीं पाएंगे।

.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> 

उम्मीद है कि यह भविष्य में किसी की सहायता करेगा।