ट्विटर बूटस्ट्रैप का उपयोग करते समय मैं किसी चुनिंदा फ़ील्ड की चौड़ाई कैसे बदलूं? input-xxlarge जोड़ना सीएसएस वर्ग काम नहीं कर रहा है (जैसे यह अन्य रूप तत्वों पर करता है), इसलिए मेरी ड्रॉप डाउन के तत्व वर्तमान में बंद हो गए हैं।ट्विटर बूटस्ट्रैप में चुनिंदा टैग की चौड़ाई बदलें
यह मेरे लिए चुनिंदा टैग की चौड़ाई को कम करने के लिए काम करता है;
<select id ="Select1" class="input-small">
आप इन कक्षाओं में से किसी एक का उपयोग कर सकते हैं;
class="input-small"
class="input-medium"
class="input-large"
class="input-xlarge"
class="input-xxlarge"
बस यह ध्यान रखना चाहते हैं कि यह बूटस्ट्रैप 3 में काम नहीं करता है। ये कक्षाएं केवल नियंत्रण की ऊंचाई/पैडिंग पर प्रभाव डालती हैं। – Stefan
ट्विटर बूटस्ट्रैप 3 के लिए, जोड़ें: .input-mini { चौड़ाई: 60 पीएक्स; } । इनपुट-छोटे { चौड़ाई: 90 पीएक्स; } । इनपुट-माध्यम { चौड़ाई: 150 पीएक्स; } । इनपुट-बड़े { चौड़ाई: 210 पीएक्स; } .input-xlarge { चौड़ाई: 270 पीएक्स; } ।इनपुट-xxlarge { चौड़ाई: 530 पीएक्स; } –
एक जिम्मेदार (गतिशील) समाधान अच्छा होगा –
अकेले परीक्षण किया गया, <select class=input-xxlarge> तत्व की सामग्री चौड़ाई 530px पर सेट करता है। (विभिन्न पैडिंग के कारण <input class=input-xxlarge> की तुलना में तत्व की कुल चौड़ाई थोड़ी छोटी है। यदि यह समस्या है, तो अपनी खुद की स्टाइल शीट में पैडिंग को वांछित के रूप में सेट करें।)
तो यदि यह काम नहीं करता है, तो प्रभाव है अपनी खुद की स्टाइल शीट में कुछ सेटिंग द्वारा या शायद तत्व के लिए अन्य सेटिंग्स के उपयोग में रोका गया।
इस प्रकार मैं अपने कस्टम स्टाइलशीट में एक नया सीएसएस वर्ग बनाने के द्वारा एक समाधान के लिए क्या किया:
.selectwidthauto
{
width:auto !important;
}
और फिर मेरे सभी का चयन तत्व या तो स्वयं की तरह करने के लिए इस वर्ग के लिए आवेदन किया:
<select id="State" class="selectwidthauto">
...
</select>
या jQuery का उपयोग:
$('select').addClass('selectwidthauto');
यह एक अच्छा समाधान है। लेकिन जब 3 ड्रॉप-डाउन मेनू एक साथ जोड़े जाते हैं, तो यह अभी भी इन 3 ड्रॉप-डाउन मेनू स्टैक बनाता है। –
मुझे नहीं लगता कि आपको अभी भी तीन साल बाद मदद की ज़रूरत है, आने वाले लोगों के लिए बुरी आप डिस्प्ले जोड़ सकते हैं: इनलाइन-ब्लॉक ताकि वे –
बूटस्ट्रैप 3 में, यह अनुशंसा की जाती है कि आप col-**-# div टैग में उन्हें लपेटकर आकार इनपुट करें। ऐसा लगता है कि ज्यादातर चीजों में 100% चौड़ाई होती है, खासकर .form-control तत्व।
मुझे पवन के सीएसएस वर्ग प्रदर्शन के साथ संयुक्त के लिए: इनलाइन-ब्लॉक (ताकि चयन ढेर नहीं है) सबसे अच्छा काम करता है। और मैं यह एक मीडिया क्वेरी में लपेट, तो यह मोबाइल अनुकूल रहता है:
@media (min-width: $screen-xs) {
.selectwidthauto {
width:auto !important;
display: inline-block;
}
}
आप इस
<div class="row">
<div class="col-xs-2">
<select id="info_type" class="form-control">
<option>College</option>
<option>Exam</option>
</select>
</div>
</div>
की तरह कुछ का उपयोग कर सकते , इनपुट-एलजी = बड़ा, अधिक जानकारी के लिए देखें https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
ढेर न हों, यह केवल 'चयन' तत्व की ऊंचाई पर प्रभाव डालता है, चौड़ाई नहीं । – McVenco
क्या आप अपना एचटीएमएल पोस्ट कर सकते हैं? – gaurang171