बूटस्ट्रैप 3

Question

काटने का विकल्प चुनने का विकल्प बूटस्ट्रैप पर विकल्प "कट ऑफ" विकल्प को रोकने का कोई तरीका है? कृपया नीचे दिए गए कोड और चित्रों का पालन करें। पहली तस्वीर सही तरीके से प्रदर्शित विकल्पों को दिखाती है। दूसरा चित्र स्क्रीन चौड़ाई को विकल्प टेक्स्ट से छोटा होने के बाद आकार काटने का विकल्प दिखाता है।

यदि मैं सीएसएस के माध्यम से ऐसा नहीं कर सकता, तो मैं चयन चौड़ाई से अधिक चौड़ाई बड़ी है, तो मैं सबसे बड़ी विकल्प चौड़ाई के बराबर चयन बॉक्स की चौड़ाई निर्धारित करने के लिए jQuery का उपयोग करने की योजना बना रहा हूं।

<select class="form-control multiple" size="3"> 
    <option>test123 test123 test123 test123 test123 test123</option> 
    <option>test123 test123 test123 test123 test123 test123</option> 
</select> 

Answer 1

केवल एक चीज मैं के बारे में सोच सकते हैं कि, के बाद से बूटस्ट्रैप कंटेनर स्वभाव से उत्तरदायी हैं, वे स्वतः ब्राउज़र की वर्तमान आकार के आधार पर <input> आकार बदलने के लिए जा रहे हैं है। इस उदाहरण में

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <input type="text" class="form-control" value="I am a very, very, very, very, very, very long option. I'm going to extend off the screen."/> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <select class="form-control"> 
     <option value="1">I am a very, very, very, very, very, very long option. I'm going to extend off the screen.</option> 
     </select> 
    </div> 
    </div> 
</div> 

, अगर हम खिड़की और छोटे छोटे आकार परिवर्तन, <input> और <select> की चौड़ाई कंटेनर यह <div class="col-xs-12"> में है के आकार को समायोजित करेगा: इस संरचना पर एक नजर डालें। इसे रोकने के लिए, हमें निश्चित-चौड़ाई इनपुट का उपयोग करने की आवश्यकता होगी, जो कि बूटस्ट्रैप जैसे उत्तरदायी ढांचे का उपयोग करने के खिलाफ जाता है, लेकिन मैं कुछ स्थितियों में आवश्यकता को देख सकता हूं।

कुछ सुझाव

विचार करने के लिए:

• क्या यह संभव है छोटे विकल्प लेबल के लिए?
• क्या आपके <select> अधिकतम चौड़ाई वाले कंटेनर में है?
• यदि कमरे नहीं है तो अपने विकल्पों का चयन करने के लिए <modal> का उपयोग संभव हो सकता है?

और सब और विफल रहता है, तो आप हमेशा एक कस्टम वर्ग <div class="col-xs-12 fixed"> आधार मूल्य बना सकते हैं और कुछ स्थिर करने के लिए चौड़ाई सेट, या तो या के रूप में आप सबसे लंबे समय तक विकल्प मान पर अधिकतम-चौड़ाई को खोजने के लिए JQuery का उपयोग कर का सुझाव दिया।

आशा है कि मदद करता है!