बूटस्ट्रैप: नौबार आइटम के सापेक्ष ड्रॉपडाउन मेनू की स्थिति

108

मेरे पास निम्न ड्रॉपडाउन है

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

ड्रॉपडाउन का ऊपरी-बाएँ कोने पाठ के निचले-बाएँ कोने (क्रिया) पर है, लेकिन मुझे आशा है कि ड्रॉपडॉन के ऊपरी-दाएँ कोने की स्थिति पाठ के निचले-दाएँ स्थान पर है। मैं उसे कैसे कर सकता हूँ?

css twitter-bootstrap drop-down-menu

— curious1
स्रोत

229

यह वह प्रभाव है जिसे हम प्राप्त करने की कोशिश कर रहे हैं:

बूटस्ट्रैप 3.1.0 की रिलीज़ के साथ और फिर से बूटस्ट्रैप की रिलीज़ के साथ जिन कक्षाओं को लागू करने की आवश्यकता है, 4. यदि नीचे दिए गए समाधानों में से कोई भी काम नहीं कर रहा है तो बूटस्ट्रैप की संस्करण संख्या की जाँच करें जो आप आयात कर रहे हैं। और एक अलग कोशिश करो।

बूटस्ट्रैप ३

V3.1.0 से पहले

आप pull-rightकार्यवाहक के साथ मेनू के दाहिने हाथ की रेखा के लिए वर्ग का उपयोग कर सकते हैं :

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

फिडल: http://jsfiddle.net/joeczucha/ewzafdju/

V3.1.0 के बाद

V3.1.0 के अनुसार, हमने ड्रॉपडाउन मेनू पर .pull-right को हटा दिया है। मेनू को राइट-एलाइन करने के लिए, .dropdown-menu-right का उपयोग करें। नावबार में दाएं-संरेखित नौसेना के घटक मेनू को स्वचालित रूप से संरेखित करने के लिए इस वर्ग के मिश्रण संस्करण का उपयोग करते हैं। इसे ओवरराइड करने के लिए .dropdown-menu-left का उपयोग करें।

आप dropdown-rightकार्यवाहक के साथ मेनू के दाहिने हाथ की रेखा के लिए वर्ग का उपयोग कर सकते हैं :

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

फिडल: http://jsfiddle.net/joeczucha/1nrLafxc/

बूटस्ट्रैप ४

बूटस्ट्रैप 4 के लिए क्लास बूटस्ट्रैप> 3.1.0 के समान है, बस देखते रहें क्योंकि आसपास के बाकी मार्कअप थोड़ा बदल गए हैं:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

फिडल: https://jsfiddle.net/joeczucha/f8h2tLoc/

— जो Czucha
स्रोत

1

मैंने RTL वेबसाइट में पुल-राइट और पुल-लेफ्ट का परीक्षण किया। वे सही काम करते हैं, लेकिन ड्रॉपडाउन-मेनू-राइट और ड्रॉपडाउन-मेनू-बाएं नहीं।

— उत्सुक

कंटेनर (.dropdown) में "इनलाइन-बॉक" का प्रदर्शन होना चाहिए। इस उदाहरण में LI ठीक है, लेकिन अगर यह एक DIV होता तो संरेखण को ब्लॉक तत्व के अंत में रखा जाता जो कि सबमेनू चौड़ाई से प्रभावित होता है।

— निकोलस

क्लास "ड्रॉपडाउन-मेनू-राइट" ने बूटस्ट्रैप 4 (बीटा) के साथ भी चाल चली। धन्यवाद! "पुल-राइट" काम नहीं किया।

— एंड्रियास वोगल

class="dropdown"मेरे लिए एक उचित संरेखण प्राप्त करने के लिए कुंजी का उपयोग कर रहा था

— लुईस

50

यह निश्चित नहीं है कि अन्य लोग इस समस्या को कैसे हल करते हैं या क्या बूटस्ट्रैप का इसके लिए कोई विन्यास है।

मुझे यह धागा मिला जो एक समाधान प्रदान करता है:

https://github.com/twbs/bootstrap/issues/1411

पोस्ट में से एक के उपयोग का सुझाव दिया गया है

<ul class="dropdown-menu" style="right: 0; left: auto;">

मैंने परीक्षण किया और यह काम करता है।

आशा है कि यह जानने के लिए कि बूटस्ट्रैप इसे करने के लिए कॉन्फिगरेशन प्रदान करता है, उपरोक्त सीएसएस के माध्यम से नहीं।

चीयर्स।

— curious1
स्रोत

1

धन्यवाद, इस एक बूटस्ट्रैप के लिए एक

— नावबार

20

बूटस्ट्रैप डॉक पर आधारित:

V3.1.0 के रूप में, .pull-right को ड्रॉपडाउन मेनू पर हटा दिया गया है। .dropdown-menu-right का उपयोग करें

उदाहरण के लिए:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

— ninetiger
स्रोत

1

मैंने RTL वेबसाइट में पुल-राइट और पुल-लेफ्ट का परीक्षण किया। वे सही काम करते हैं, लेकिन ड्रॉपडाउन-मेनू-राइट और ड्रॉपडाउन-मेनू-बाएं नहीं।

— जिज्ञासु

10

यदि आप मेनू को प्रदर्शित करना चाहते हैं, तो बस क्लास को "ड्रॉपअप" में जोड़ें
और उसी डीव से मौजूद होने पर "ड्रॉपडाउन" क्लास को हटा दें।

<div class="btn-group dropup">

— फिलिप कुल
स्रोत

1

"मुझे आशा है कि ड्रॉपडॉन के ऊपरी-दाएं कोने की स्थिति पाठ के निचले-दाएँ स्थान पर है" - ओपी

— जो कज़ुचा

मैं तुम्हें टिप्पणी नहीं समझ सकता, क्षमा करें !!

— फिलिप कुल

यह अच्छा लग रहा है लेकिन, हम इसे कैसे स्वचालित बना सकते हैं? जैसे मेरे पास डेटा की सूची है और नीचे का हिस्सा निश्चित नहीं है।

— संतोष

2

यहां तक कि अगर यह देर से मुझे आशा है कि मैं किसी की मदद कर सकता हूं। यदि ड्रॉपडाउन मेनू या सबमेनू स्क्रीन के दाईं ओर है तो यह बाईं ओर खुला है, यदि मेनू या सबमेनू बाईं ओर है तो यह दाईं ओर खुला है।

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

ऊर्ध्वाधर स्थिति का पता लगाने के लिए आप भी जोड़ सकते हैं

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

— JD11
स्रोत

क्या इसे ऊपर और नीचे की तरह भी समायोजित किया जा सकता है? अगर ड्रॉपडाउन लिंक सबसे नीचे है तो मैं इसे शीर्ष दिशा में खोलना चाहूंगा? क्या हम इसे हासिल कर सकते हैं?

— संतोष

1

मैंने ऊर्ध्वाधर स्थिति का पता लगाने के लिए अपना जवाब अपडेट कर दिया है?

— JD11

1

बूस्ट्रैप में उस के लिए एक वर्ग होता है navbar-right। तो आपका कोड इस प्रकार दिखेगा:

<ul class="nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
    </li>
</ul>

— आंद्रेई स्टालबे
स्रोत

0

यदि आप ड्रॉपडाउन को केंद्र में रखना चाहते हैं, तो यह समाधान है।

<ul class="dropdown-menu" style="right:auto; left: auto;">

— जॉन डेकर
स्रोत