bootstrap documents के रूप में, ड्रॉपडाउन मेनू के लिए कोई विकल्प नहीं है ... यह दुखद है, लेकिन इसका मतलब है कि वर्तमान में आपके इच्छित कार्यक्षमता के लिए 'बूटस्ट्रैप' समाधान नहीं है। हालांकि, अगर आप इसका उपयोग कर रहे हैं तो कोणीय-यूआई/बूटस्ट्रैप किट में एक समाधान है। आपके द्वारा संदर्भित टिकट बंद कर दिया गया है क्योंकि यह 15 जुलाई 2015 तक added to the Angular-UI था।
आपको बस इतना करना है कि ड्रॉपडाउन-एपेंड-टू-बॉडी ड्रॉपडाउन तत्व में आंतरिक ड्रॉपडाउन-मेनू में शामिल करने के लिए तन। यह तब उपयोगी होता है जब ड्रॉपडाउन बटन ओवरफ्लो के साथ एक div के अंदर होता है: छुपा हुआ, और मेनू अन्यथा छुपाया जाएगा। ' (reference)
<div class="btn-group" dropdown dropdown-append-to-body>
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
आशा इस मदद करता है!
संपादित
एक और एसओ सवाल का जवाब देने के प्रयास में, मैं एक समाधान है कि बहुत अच्छी तरह से काम करता है अगर आप कोणीय-UI का उपयोग नहीं कर रहे थे पाया। यह 'हैकी' हो सकता है, लेकिन यह बूटस्ट्रैप मेनू कार्यक्षमता को तोड़ता नहीं है, और ऐसा लगता है कि मैंने इसका उपयोग अधिकांश मामलों के साथ किया है।
तो अगर कोई और इसे देखता है और दिलचस्पी लेता है तो मैं कुछ फिडल छोड़ दूंगा।
Problem FIDDLE
समस्या: एक पैनल शरीर
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Another item</a></li>
<li><a href="#">This is a longer item that will not fit properly</a></li>
</ul>
</div>
</div>
</div>
Solution FIDDLE
के भीतर एक का चयन लटकती पहले दिखाता है कि क्यों एक शरीर संलग्न मेनू के उपयोग अच्छा हो सकता है, दूसरा काम कर समाधान से पता चलता
(function() {
// hold onto the drop down menu
var dropdownMenu;
// and when you show it, move it to the body
$(window).on('show.bs.dropdown', function (e) {
// grab the menu
dropdownMenu = $(e.target).find('.dropdown-menu');
// detach it and append it to the body
$('body').append(dropdownMenu.detach());
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this could be improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left
});
});
// and when you hide it, reattach the drop down, and hide it normally
$(window).on('hide.bs.dropdown', function (e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
EDIT मुझे अंत में मिला जहां मुझे मूल रूप से यह समाधान मिला।क्रेडिट देना होगा जहां credit is due!
क्या आपने कुछ भी करने की कोशिश की है? एक स्टार्टर पहेली उपयोगी होगा। – isherwood
जो भी मैं कोशिश करता हूं वह "हैक" होगा। बूटबैप के साथ मैं "मैं सोच रहा हूं कि यह संभव है"। – Alvaro