बूटस्ट्रैप ड्रॉपडाउन काम नहीं कर रहा है

81

मैं काम करने के लिए बूटस्ट्रैप ड्रॉपडाउन नहीं कर सकता। यहाँ मेरा html for nav है:

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

और यहाँ स्क्रिप्ट हैं:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

मैं क्या गलत कर रहा हूं? आपके उत्तर के लिए धन्यवाद!

html  drop-down-menu  twitter-bootstrap 
— अन्याय करनेवाला
स्रोत
इसी तरह की पोस्टिंग पर मेरा उत्तर चेक stackoverflow.com/questions/15592158/...
— Tejasvi हेगड़े
4
मेरा मुद्दा बूटस्ट्रैप js फ़ाइल को याद कर रहा था, किसी और की मदद करने के मामले में
— ड्रूविविड
मैंने अपने को अपडेट किया था Gruntfile.jsजो कुछ रास्तों को बदलता है jsFileList... रास्तों को अपडेट करना और उपयुक्त ग्रंट कार्य (ग्रंट देव / ग्रंट बिल्ड / आदि) को चलाने से मेरी समस्या हल हो गई।
— केन प्रिंस
1
@Drewdavid धन्यवाद! मैं गायब था bootstrap.min.js और jquery
— 13

जवाबों:

11

वर्किंग डेमो: http://codebins.com/bin/4ldqp73

इसे इस्तेमाल करे 

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>
— गौरांग १1१
स्रोत
57
आपके डेमो में ड्रॉपडाउन अब काम नहीं कर रहा है, या शायद समस्या मेरे ब्राउज़र के साथ है।
— नूह
154

मुझे भी यही समस्या थी। कुछ घंटों की शूटिंग के बाद पाया कि,

मैं था 

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

के बजाय,

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

आशा है कि यह किसी की मदद करता है

— राजकुमार अष्टक
स्रोत
1
क्या फर्क पड़ता है?
— CodyBugstein
9
Imray, बूटस्ट्रैप स्क्रिप्ट jQuery में एक्सटेंशन दर्ज करता है, इसलिए यदि jQUery लोड नहीं है, तो एक्सटेंशन कभी पंजीकृत नहीं होते हैं।
— अमोलिस्की
2
आदेश महत्वपूर्ण है, वास्तव में। सहायता के लिए धन्यवाद!
— K.and_bioinfo
धन्यवाद। Angular.json फ़ाइल में मेरे कोणीय 10 प्रोजेक्ट के लिए भी काम किया
— शॉनॉन
86

जब मुझे bootstrap.min.jsदो बार शामिल किया गया तो मुझे भी यही समस्या थी। उनमें से एक को हटा दिया और यह काम करना शुरू कर दिया।

— कुबिलाय
स्रोत
1
इससे मेरा मुद्दा ठीक हो गया। मेरा कोणीय ऐप बूटप्रेप की कई प्रतियों में मेरे bower_compenders को इंजेक्ट करने के लिए खींच रहा था
— Pakage
इससे मेरा मुद्दा ठीक हो गया। धन्यवाद
— Yudu बान
इसने इसे ASP.NET MVC 5 प्रोजेक्ट में बंडल के साथ तय किया
— क्लेसेल
मेरे लिए इसे तय किया। धन्यवाद।
— हेनरी ए।
वास्तव में कष्टप्रद ... aurelia-webpack-skeleton का उपयोग करके मुझे अपने main.js में bootstrap.css आयात करने की आवश्यकता है, लेकिन अगर मैं 'बूटस्ट्रैप' आयात करता हूं, तो मुझे वह अजीब व्यवहार मिलता है ...
— व्यंग्यात्मक
23

FYI करें: यदि आपके पास bootstrap.js है, तो आपको bootstrap-dropdown.js नहीं जोड़ना चाहिए ।

मैं bootstrap.min.js के साथ परिणाम के बारे में अनिश्चित हूं।

— फ़ारेनहाइट
स्रोत
2
धन्यवाद। मैं दोनों dropdown.js और bootstrap.js था और इस तरह यह काम नहीं किया। Dropdown.js को हटाने से समस्या हल हो गई।
— nyxz
आप सबसे अच्छे आदमी हैं, मैंने इस मुद्दे को खोजने के लिए लगभग 6 घंटे बिताए !!, धन्यवाद फिर से ..
— Adel
1
महोदय आपका बहुत बहुत धन्यवाद! मेरे पास भी यही समस्या है, लेकिन मेरे पास bootstrap.jsऔर है bootstrap.min.js.। जब मैंने बाद को हटा दिया, तो यह काम करता है।
1
धन्यवाद - मेरे मामले में, मैं दोनों के लिए किया था js/bootstrap.jsऔर साथ हीjs/dropdown.js
— संजय मनोहर
13

अपनी शैली के लिए आपको बूटस्ट्रैप की सीएसएस फ़ाइलों को शामिल करने की आवश्यकता है, आमतौर पर </head>तत्व से पहले

<link href="css/bootstrap.css" rel="stylesheet">

आगे आपको js फ़ाइलों को शामिल करने की आवश्यकता होगी, यह दस्तावेज़ के अंत में उन्हें शामिल करने की सिफारिश की जाती है, आमतौर पर इससे पहले कि </body>पेज तेजी से लोड होते हैं।

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
— Âssàmâ होड
स्रोत
8

बॉडी टैग के भीतर निम्नलिखित पंक्तियाँ जोड़ें।

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
— शेवोन सिल्वा
स्रोत
धन्यवाद, इसने मुझे कुछ समय बचाया।
— DrewT
7

आपको इस फ़ाइलों को <head></head>अपने html में आयात करना होगा ।

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
— मार्टिन
स्रोत
1
मुझे नहीं पता कि मैं गलत तरीके से क्यों या क्या कर रहा था, लेकिन यह जवाब मेरे लिए था। धन्यवाद मार्टिन!
— dghalbr
धन्यवाद। मुझे नहीं पता कि इससे समस्या का समाधान क्यों हुआ। मेनू ने /js/jquery.js और /js/bootstrap.min.js के साथ ठीक काम किया जब तक कि वेबसाइट दूसरे विंडोज सर्वर पर माइग्रेट नहीं हुई।
— हांग
5

आपने शामिल किया है jquery.js?

इसके अलावा, कोड की इस पंक्ति की तुलना अपने साथ करें:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

यह संस्करण देखें जो ठीक काम करता है।

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
— फ्रैंकलाइन
स्रोत
4

बूटस्ट्रैप और jquery दोनों को शामिल किया जाना चाहिए:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

नोट: jquery-xxxmin.js संस्करण 2.xx संस्करण होना चाहिए !

— डेविड लियाओ
स्रोत
4

मुझे यह समझ में आया और यह करने का सबसे सरल तरीका है कि बस बूटस्ट्रैप लिंक की सीडीएन को कॉपी करें और पाएं जो कि https://www.bootstrapcdn.com/ और Jquery CDN लिपियों में पाया जा सकता है जो यहां पर पाया जा सकता है। https: // code.jquery.com/ और लिंक को कॉपी करने के बाद, बूटस्ट्रैप लिंक HTML के सिर पर पेस्ट करता है और नीचे दिए गए उदाहरण की तरह HTML के शरीर में Jquery स्क्रिप्ट पेस्ट करता है:

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

मेरे लिए एकदम सही काम करता है यह आपके लिए भी काम करता है :)

— अठे कुर्तेशी
स्रोत
धन्यवाद ! , यह </body>टैग से पहले यह मेरे अंत पर काम कर रहा है!
— रयान एक्विनो
2

इसे हेड सेक्शन में आज़माएँ

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
— हमजा जावेद
स्रोत
2

यहाँ मैंने क्या किया .....

बस मेरे प्रोजेक्ट से bootstrap.min.js को हटा दिया और bootstrap.js को इसमें जोड़ दिया और यह काम करने लगा ........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
— मोहित धवन
स्रोत
#Kubilay उत्तर में जोड़ना: आपके पास प्रति दस्तावेज़ 'ए' नाम का एक एकल वर्ग हो सकता है। .min.css / .min.js - आमतौर पर एक ही css और js फाइलें होती हैं, जिनमें से सभी रिक्त स्थान को हटा दिया जाता है। यह उन्हें छोटा बनाता है और तेजी से लोड करता है। वैसे भी ब्राउज़र को रिक्त स्थान की आवश्यकता नहीं होगी।
— मोहित धवन
एक को हटा दें यदि आपने दोनों का उपयोग किया है
— मोहित धवन
2

इस कोड को आज़माएं:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
— निशांत इंगले
स्रोत
1

आपको परस्पर विरोधी सीएसएस फ़ाइलों / संपत्तियों की जांच करनी होगी। उदाहरण के लिए आपके पास ".nav" कस्टम शैली की सामग्री हो सकती है और अपनी स्वयं की सीएसएस फ़ाइलों को अक्षम करने का प्रयास करें और जांच करें कि क्या काम करता है, तो जाँच करें कि कौन सी फ़ाइल या कस्टम शैली है जो संघर्षों को भी सुनिश्चित करती है। आप अपने कोड में bootstrap.min.js शामिल हैं

— मिस्त्री
स्रोत
1

मेरे पास केवल यह देखने के लिए एक समान मुद्दा था कि मैंने बूटस्ट्रैप स्क्रिप्ट को दो बार जोड़ा था और दूसरी बूटस्ट्रैप लिपि जूलरी स्क्रिप्ट के ऊपर थी।

उपाय:

  • सुनिश्चित करें कि bootstrap.min.js और jquery.min.js केवल एक बार आपकी फ़ाइल में शामिल हैं।
  • Jquery.min.js के बाद बूटस्ट्रैप.min.js स्क्रिप्ट को शामिल किया जाना चाहिए
— बीके
स्रोत
1

कॉपी-पेस्ट jQuery नीचे <script>और स्टाइलशीट <link>अपने में <head>आप कर रहे हैं लोड हो रहा है सभी आवश्यक फ़ाइलों सुनिश्चित करने के लिए।

यह महत्वपूर्ण है कि आपकी JQuery .jsफाइल .cssस्टाइलशीट के ऊपर हो

बस परीक्षण करने के लिए निम्नलिखित पंक्ति पेस्ट करें

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

समस्या ज्यादातर jQuery स्क्रिप्ट को लोड करने के साथ होती है, सुनिश्चित करें कि आप संदर्भों को सही ढंग से जोड़ते हैं।

अब परीक्षण करें

फिर भी अगर यह काम नहीं करता है, तो बूटस्ट्रैप वेबसाइट की जांच करें कि उनके पास एक नमूना कार्यान्वयन है।

getbootstrap.com/docs/4.3/compenders/navbar/#supported-content

— अमीर डोरा।
स्रोत
1

नवीनतम बूटस्ट्रैप के लिए आपको Popper.js की आवश्यकता होगी

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<body>टैग के अंदर, बॉडी सेक्शन के अंत में लिंक कॉपी करें <Head>।

— सैयद मुहम्मद इदरीस
स्रोत
1

मैंने सिर्फ अपने इंडेक्स पेज JSका हिस्सा जोड़ा है bootstrap, तो यह पेस्ट काम करता है

, यदि आप बूटस्ट्रैप के नवीनतम संस्करण का उपयोग कर रहे हैं

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
— अभद्रता
स्रोत
यह एक स्वीकृत उत्तर के साथ एक 8 + वर्ष पुराना प्रश्न है ...
— Zsolt Meszaros
@ZsoltMeszaros हां, मुझे पता है। लेकिन ऐसे अन्य लोग भी हैं जो इस समस्या का सामना कर सकते हैं
— mecdeality
0

मेरे पास वही मुद्दा था जो मुझे यहां लाया था।

मेरा मुद्दा: मैं अपने jquery स्क्रिप्ट फ़ाइल के रूप में अनुशंसित jquery 1.12.0 संस्करण का उपयोग कर रहा था।

समाधान: jquery स्क्रिप्ट को jquery 2.2.0 संस्करण के साथ बदल दिया गया।

यह मेरे लिए हल है।

— एवरेस्ट नमोसू
स्रोत
0

मेरे लिए, यह एक कोर मुद्दा था। मैंने crossorigin="anonymous"अपने स्क्रिप्ट आयात टैग से हटा दिया , और यह फिर से काम करना शुरू कर दिया।

BTW नवीनतम स्क्रिप्ट टैग, सही क्रम में, हमेशा यहाँ पाया जा सकता है: https://getbootstrap.com/

संपादित करें: जाहिरा तौर deferपर scriptटैग में जोड़ने से सभी बूटस्ट्रैप उपहार भी टूट जाएंगे।

— कैमरन हडसन
स्रोत
0

यहाँ बूटस्ट्रैप साइट से JS लिंक के बाद CSS लिंक कॉपी / पेस्ट करें । फिर ड्रॉपडाउन काम करना चाहिए।

मेरा पेज ऐसा दिखता है:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

( यहां से नवबार )

— प्रो क्यू
स्रोत
0

Popper.js लाइब्रेरी की जाँच करें क्योंकि मुझे वही समस्या थी, आप https://getbootstrap.com/ पर ड्रॉप डाउन के लिए बूटस्ट्रैप, jquery और पॉपर CDNs पा सकते हैं या निम्न स्क्रिप्ट टैग्स की प्रतिलिपि बना सकते हैं

— necheervan abdullah
स्रोत
0

जब मैंने css और बूटस्ट्रैप संस्करणों को मिलाया तो मेरी (वही) समस्या उत्पन्न हो गई। मैं संस्करण 4.5 bootstrap.min.css के साथ संस्करण 3 bootstrap.min.js का उपयोग कर रहा था

यदि आपने हाल ही में अपने स्थिर फ़ोल्डर में css और js फ़ाइलों का एक गुच्छा लोड या ओवरवोट किया है, तो यह शुरू करने के लिए एक अच्छी जगह होगी।

सौभाग्य।

— पॉवरअटकर
स्रोत
-1

मैंने Angular 7, jQuery 3.4.1, पॉपर 1.12.9 और बूटस्ट्रैप 4.3.1 के साथ सेटअप किया था, मेरे लिए कुछ भी काम नहीं कर रहा था, मैंने शैलियों में यह छोटा हैक किया था:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

Html इस तरह दिखता है:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
— ० लुकास ०
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.