बाईं ओर खोलने के लिए ट्विटर बूटस्ट्रैप सबमेनू कैसे बनाएं?

Question 1

मैं ड्रॉपडाउन मेनू में ट्विटर बूटस्ट्रैप सबमेनू बनाने की कोशिश कर रहा था, लेकिन मुझे एक समस्या मिली है: मेरे पास पृष्ठ के शीर्ष दाएं कोने में ड्रॉपडाउन मेनू है और उस मेनू में एक और सबमेनू है। हालांकि, जब सबमेनू खुलता है - यह खिड़की में फिट नहीं होता है और बहुत अधिक दाईं ओर जाता है, ताकि उपयोगकर्ता केवल पहले अक्षर देख सके। उस सबमेनू को दाईं ओर नहीं, बल्कि बाईं ओर कैसे खोलें?

Question 2

सबसे सरल तरीका यह होगा कि pull-leftकक्षा को अपने साथ जोड़ा जाएdropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: डेमो

Question 3

अगर मैंने इसे सही समझा है, तो बूटस्ट्रैप सिर्फ इस मामले के लिए एक CSS क्लास प्रदान करता है। मेनू 'ul' में 'पुल-राइट' जोड़ें:

<ul class="dropdown-menu pull-right">

.. और अंतिम परिणाम यह है कि मेनू विकल्प सही-संरेखित होते हैं, बटन के अनुरूप वे नीचे से गिरते हैं।

Question 4

क्यूरेंट क्लास .dropdown-submenu > .dropdown-menuहै left: 100%;। इसलिए, यदि आप बाईं ओर सबमेनू खोलना चाहते हैं, तो उन सेटिंग्स को नकारात्मक बाईं स्थिति में ओवरराइड करें। उदाहरण के लिए left: -95%;। अब आपको बाईं ओर सबमेनू मिलेगा, और आप सही पूर्वावलोकन प्राप्त करने के लिए अन्य सेटिंग्स को ट्विक कर सकते हैं।

यहाँ डेमो है

EDIT: OP का प्रश्न और मेरा उत्तर अगस्त 2012 से है। इस बीच, बूटस्ट्रैप बदल गया, इसलिए अब आपके पास .pull-left क्लास है। इसके बाद, मेरा उत्तर सही था। अब आपको मैन्युअल रूप से css सेट नहीं करना है, आपके पास .pull-left क्लास है।

EDIT 2: डेमो काम नहीं कर रहे हैं, क्योंकि बूटस्ट्रैप ने उनके URL को बदल दिया है। बस बाहरी संसाधनों को jsfiddle में बदलें और उन्हें नए लोगों के साथ बदलें।

Question 5

यदि आप बूटस्ट्रैप v4 का उपयोग कर रहे हैं तो ऐसा करने का एक नया तरीका है।

आपको तत्व .dropdown-menu-rightपर उपयोग करना चाहिए .dropdown-menu।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

लिंक से लिंक करें: https://getbootstrap.com/docs/4.0/compenders/dropdowns/#menu-items

Question 6

कार्य करने का सही तरीका है:

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

Question 7

मैंने एक जावास्क्रिप्ट फ़ंक्शन बनाया है जो दिखता है कि क्या उसके पास दाईं ओर पर्याप्त जगह है। यदि उसके पास वह दाईं ओर दिखाएगा, तो वह उसे बाईं ओर प्रदर्शित करेगा

में परीक्षण किया गया:

फ़ायरफ़ॉक्स (मैक)
चर्मे (मैक)
सफ़ारी (मैक)

जावास्क्रिप्ट:

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

क्योंकि मैं इस सुधार को हर उस मेनू आइटम पर नहीं जोड़ना चाहता जो मैंने इस पर एक नया वर्ग बनाया था। तय मेनू को उल पर रखें:

<ul class="dropdown-menu fixed-menu">

मुझे उम्मीद है कि यह आपके लिए काम करता है।

ps। सफारी और क्रोम में थोड़ा बग, पहले मंडराने के लिए इसे बाईं ओर मचाना होगा अगर मैंने इसे ठीक किया तो यह पोस्ट अपडेट कर देगा।

Question 8

यदि आपके पास केवल एक स्तर है और आप बूटस्ट्रैप 3 pull-rightको ulतत्व में जोड़ते हैं

<ul class="dropdown-menu pull-right" role="menu">

Question 9

वास्तव में - यदि आप dropdownरैपर तैरने के साथ ठीक हैं - मैंने पाया है कि इसे जोड़ना जितना आसान navbar-rightहैdropdown ।

यह धोखा जैसा लगता है, क्योंकि यह नौबत में नहीं है, लेकिन यह मेरे लिए ठीक काम करता है।

<div class="dropdown navbar-right">
...
</div>

फिर आप pull-leftसीधे में एक के साथ अस्थायी अनुकूलित कर सकते हैं dropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... या इसके आसपास एक आवरण के रूप में ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

Question 10

यदि आप LESS CSS का उपयोग कर रहे हैं, तो मैंने कनेक्टिंग एरो के साथ ड्रॉपडाउन को स्थानांतरित करने के लिए थोड़ा मिक्सिन लिखा:

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

फिर उदाहरण .dropdown-menuके dropdown-menu-xलिए एक आईडी के साथ जाने के लिए, आप यह कर सकते हैं:

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

Question 11

मैंने एक जावास्क्रिप्ट फ़ंक्शन बनाया है जो दिखता है कि क्या उसके पास दाईं ओर पर्याप्त जगह है। यदि यह उसके पास है तो वह दाईं ओर दिखाएगा, अन्यथा वह बाईं ओर प्रदर्शित करेगा। फिर से अगर इसके दाईं ओर पर्याप्त स्थान है, तो यह दाईं ओर दिखाई देगा। यह एक पाश है ...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

Question 12

क्या आप बूटस्ट्रैप के नवीनतम संस्करण का उपयोग कर रहे हैं? मैंने नीचे दिखाए गए अनुसार द्रव लेआउट उदाहरण से html को अनुकूलित किया है । मैंने एक ड्रॉप डाउन जोड़ा और pull-rightकक्षा को जोड़कर दाहिने हाथ की ओर रख दिया । जब ड्रॉप डाउन मेनू पर मँडरा जाता है तो यह स्वचालित रूप से बाईं ओर खींच लिया जाता है और कुछ भी छिपा नहीं होता है - सभी मेनू पाठ दिखाई देता है। मैंने किसी भी कस्टम css का इस्तेमाल नहीं किया है।

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-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 class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Question 13

केवल आपको करना है

 <ul style='left:-100%'>

वह मेनू जिसे आप राइट साइड में दिखाना चाहते हैं।