बूटस्ट्रैप करीब उत्तरदायी मेनू "क्लिक पर"

Question

"उत्पादों" पर क्लिक करें मैं एक सफेद div स्लाइड (जैसा कि संलग्न में देखा गया है)। जब उत्तरदायी (मोबाइल और टैबलेट) में, मैं उत्तरदायी नावबार को स्वचालित रूप से बंद करना चाहूंगा और केवल सफेद पट्टी दिखाऊंगा।

मैंने कोशिश की:

$('.btn-navbar').click();  

यह भी कोशिश की:

$('.nav-collapse').toggle();

और यह काम करता है। हालाँकि डेस्कटॉप के आकार में, यह भी कहा जाता है और मेनू के लिए कुछ कायरता करता है जहाँ यह एक सेकंड के लिए सिकुड़ता है।

कोई विचार?

Comments

क्या आप कुछ HTML पोस्ट कर सकते हैं? क्या आप छिपाई कार्यक्षमता के लिए बूटस्ट्रैप का उपयोग कर रहे हैं? या आप अपने खुद के कुछ को लागू करने की कोशिश कर रहे हैं?

— क्रिस होलेनबेक

मैं बस कुछ सरल करने की कोशिश कर रहा हूं, मुझे लगता है। जब मैं "उत्पाद" पर क्लिक करता हूं, तो मैं सिर्फ नेवबार बंद करना चाहता हूं

— user1040259

यदि आप इन सभी समाधानों की स्वयं यहां पर तुलना और प्रयास नहीं करना चाहते हैं, तो इस उत्तर से # 1 संपादित करें कि आपको क्या करना चाहिए।

— caw

मैं यहां थोड़ा नीचे स्क्रॉल करता हूं और @LukeTillman उत्तर देखता हूं। पूरी तरह से और jQuery के बिना काम करता है। :)

— दास किक्स

Answer 1

मुझे यह एनीमेशन के साथ काम करने के लिए मिला है!

HTML में मेनू:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

नेविगेशन में सभी तत्वों पर क्लिक करने के लिए मेनू (बूटस्ट्रैप पतन प्लगइन) को बंधन पर क्लिक करें:

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

संपादित करें इसे और अधिक सामान्य बनाने के लिए हम निम्नलिखित कोड स्निपेट का उपयोग कर सकते हैं

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Comments

यदि सभी aतत्व नहीं हैं: आपको बस कॉल करने की आवश्यकता है$("#nav-main").collapse('hide');

— अंकित जैन

@mollwe क्या आपके पास ड्रॉपडाउन मेनू के लिए कोई समाधान है? मैंने कोशिश करने के लिए एक jsfiddle बनाया, लेकिन यहां तक ​​कि मेनू भी नहीं खुलेगा। jsfiddle.net/Y3H92

— clankill3r

@ clankill3r मुझे लगता है कि bootstrap.js का संदर्भ गायब है और इसलिए मेनू काम नहीं करेगा। मैंने आपका jsfiddle: jsfiddle.net/Y3H92/1

— mollwe

@ मेरी पहेली के साथ आपका मेनू मेरे लिए बिल्कुल भी बंद नहीं होगा।

— clankill3r

देर से प्रतिक्रिया के लिए क्षमा करें @ clankill3r! लेकिन कभी नहीं से देर से ही सही। jsfiddle.net/mollwe/Y3H92/5

— मोलवे

Answer 2

आपको बूटस्ट्रैप के पतन के विकल्प के साथ पहले से शामिल किसी भी अतिरिक्त जावास्क्रिप्ट को जोड़ने की आवश्यकता नहीं है। इसके बजाय बस अपने मेनू सूची आइटम पर डेटा-टॉगल और डेटा-लक्ष्य चयनकर्ताओं को शामिल करें जैसे कि आप अपने नेवबार-टॉगल बटन के साथ करते हैं। तो आपके उत्पाद मेनू आइटम के लिए यह इस तरह दिखेगा

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

फिर आपको प्रत्येक मेनू आइटम के लिए डेटा-टॉगल और डेटा-लक्ष्य चयनकर्ताओं को दोहराने की आवश्यकता होगी

संपादित करें !!! अतिप्रवाह के मुद्दों को ठीक करने के लिए और इस फिक्स पर टिमटिमाते हुए मैं कुछ और कोड जोड़ रहा हूं जो इसे ठीक करेगा और अभी भी कोई अतिरिक्त जावास्क्रिप्ट नहीं है। यहाँ नया कोड है:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

यहाँ यह काम पर है http://jsfiddle.net/jaketaylor/84mqazgq/

यह आपके टॉगल और चयनकर्ताओं को स्क्रीन आकार के लिए विशिष्ट बना देगा और बड़े मेनू पर ग्लिट्स को खत्म कर देगा। अगर किसी को अभी भी glitches के साथ समस्या हो रही है तो कृपया मुझे बताएं और मुझे एक ठीक मिल जाएगा। धन्यवाद

संपादित करें : बूटस्ट्रैप v4.1.3 में मैं दृश्यमान / छिपे हुए वर्गों का उपयोग नहीं कर सका। hidden-xsउपयोग के बजायd-none d-sm-block और के बजाय visible-xsउपयोग d-block d-sm-none।

Comments

जब झिलमिलाहट और अजीब सामान का कारण बनता है, जब नौसेना को "उत्तरदायी" मेनू के रूप में प्रदर्शित नहीं किया जाता है।

— फ्लोरियन

यह सही क्रियान्वयन है। कोई कस्टम jQuery की जरूरत है।

— लैरीलाम्पको

मैंने इस उत्तर और मेरी पिछली टिप्पणी को हटा दिया (यह भी कि चूंकि वीडियो अब काम नहीं कर रहा था)। चंचलता के बारे में मेरी टिप्पणी अभी भी मूल उत्तर के लिए मान्य है, कुछ उठाव हो गया है और आपका "संपादित" स्पष्ट रूप से चिह्नित है मुझे इसे हटाने और इतिहास को फिर से लिखने का कोई कारण नहीं दिखता है। यह उस समय मान्य था और आपने उसी के अनुसार प्रतिक्रिया व्यक्त की थी। आपके उत्तर को पढ़ने वाले लोग "संपादित करें" देखेंगे और जानेंगे कि आपने इसमें सुधार किया है ...

— फ्लोरियन

आप पूरी तरह से प्रलेखित जावास्क्रिप्ट की एक पंक्ति से बचने के लिए अपने सभी लिंक को डुप्लिकेट करना पसंद करते हैं? getbootstrap.com/javascript/#collapse-methods ।

— सैंडर गार्गेटेन

हर झूठे तत्व को जोड़ने data-toggleऔर data-targetविशेषताओं के बजाय आप इसे माता ul- पिता या divटैग में जोड़ सकते हैं ।

— जेरेमी क्विक

Answer 3

मुझे लगता है कि आप सभी इंजीनियरिंग से अधिक हैं।

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

संपादित करें: उप मेनू की देखभाल करने के लिए, सुनिश्चित करें कि उनके टॉगल एंकर के पास ड्रॉपडाउन-टॉगल वर्ग है।

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

EDIT 2: फोन टच के लिए सपोर्ट जोड़ें।

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

Comments

स्वीकृत उत्तर होना चाहिए। अन्य लोग गैर-उत्तरदायी प्रदर्शन पर अति-इंजीनियर और झिलमिलाहट कर रहे हैं ।

— रयबो ११

यह स्वीकृत उत्तर हो सकता है लेकिन यह उप मेनू में ध्यान नहीं देता है और वास्तव में इन्हें तोड़ता है। अन्य "ओवर इंजीनियर" समाधानों में से कुछ ने अपनी छोटी-छोटी टिप्पणियों के बावजूद इसे ध्यान में रखा। निम्नलिखित जोड़ इस बात का ध्यान रखेंगे: $ (फ़ंक्शन () {$ ('। नावबार-पतन ul li a: not (.dropdown-toggle)')। क्लिक करें (फ़ंक्शन () {$ ('। navbar-toggle) दृश्यमान '); क्लिक करें ();});});

— एड बिशप

महान, अपने EDIT के लिए thanx!

— हॉन्टोनी

मुझे लगता है कि टचस्टार्ट थोड़ा बहुत है, ठीक काम करता है पर क्लिक करें। जब आप बटन से "शुरू" करते हैं तो यह कैसे खिसकता है?

— हॉन्टोनी

Answer 4

मुझे वास्तव में जेक टेलर का यह विचार अतिरिक्त जावास्क्रिप्ट के बिना करने और बूटस्ट्रैप के पतन टॉगल का लाभ लेने के लिए पसंद आया। मैंने पाया कि आप "फ़्लिकरिंग" मुद्दे को तब ठीक कर सकते हैं जब मेनू को क्लास data-targetको शामिल करने के लिए चयनकर्ता को थोड़ा संशोधित करके ढह मोड में नहीं है in। तो यह इस तरह दिखता है:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

मैं नेस्टेड ड्रॉपडाउन / मेनू के साथ इसका परीक्षण नहीं किया, इसलिए YMMV।

Comments

यह मेरे लिए भी सबसे अच्छा कार्यान्वयन था।

— २

किसी कारण से मेरा स्क्रैपी इस विधि से टूट जाता है, लेकिन जेक टेलर की विधि के साथ ठीक काम करता है।

— इंकलाब

अब तक का सबसे अच्छा और सरल जवाब।

— दीया

कुछ समय के लिए काम करने के लिए एक गैर-झिलमिल पतन प्राप्त करने की कोशिश कर रहा है, लेकिन यह अब तक का सबसे सरल और सुरुचिपूर्ण समाधान है। धन्यवाद!

— मैकेंको

Answer 5

बस पूरा होने के लिए, बूटस्ट्रैप में 4.0.0-बीटा का उपयोग करके .show ने मेरे लिए काम किया ...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

Comments

मेरे लिए सबसे अच्छा जवाब, धन्यवाद।

— मोक्सीसमानगर्म

Answer 6

मैं मान रहा हूं कि आपके पास नेव एरिया को परिभाषित करने जैसी एक लाइन है, जो बूटस्ट्रैप उदाहरणों और सभी पर आधारित है

<div class="nav-collapse collapse" >

बस MENU बटन पर जैसे गुण जोड़ें

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

मैंने जोड़ा है <body> काम किया है। यह नहीं कह सकता कि मैंने इसे या किसी भी चीज़ की रूपरेखा बनाई है, लेकिन मेरे लिए एक इलाज लगता है ... जब तक कि आप मेनू खोलने के लिए UI के यादृच्छिक स्थान पर क्लिक नहीं करते हैं, तब तक यह इतना अच्छा नहीं है।

डीके

Comments

बूटस्ट्रैप की अंतर्निहित कार्यक्षमता पर निर्भर उचित समाधान; कोई अतिरिक्त jQuery या जावास्क्रिप्ट नहीं। और सब से सरल उपाय। यह स्वीकृत उत्तर होना चाहिए।

— सेर्गी पपीसिट

Answer 7

यह काम करता है, लेकिन चेतन नहीं करता है।

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Comments

यह थोड़ा आश्चर्य की बात है कि इस के लिए एक विन्यास विकल्प नहीं है क्योंकि क्लिक पर बंद होना बेहतर डिफ़ॉल्ट होगा।

— 20

Answer 8

HTML में मैं के एक वर्ग जोड़ा नव-लिंक करने के लिए एक प्रत्येक नेविगेशन लिंक के टैग।

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

Answer 9

यह समाधान डेस्कटॉप और मोबाइल पर एक अच्छा काम है।

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

Comments

डेटा-लक्ष्य के रूप में नेबर-आईडी का उपयोग करते समय मेरे लिए काम किया: <div id = "navbar" class = "पतन navbar-पतन" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# navbar"> लेकिन एक बदसूरत एनीमेशन देता है डेस्‍कटॉप के आकार में

— wutzebaer

बहुत बदसूरत, बेकार!

— कैंडलजैक

Answer 10

बस उपयोगकर्ता 1040259 के समाधान के लिए, इस कोड को अपने $ (डॉक्यूमेंट) में जोड़ें। पहले से ही (फ़ंक्शन () {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

जैसा कि वे उल्लेख करते हैं, यह कदम को चेतन नहीं करता है ... लेकिन यह आइटम चयन पर नौसेना बार को बंद कर देता है

Answer 11

इसके साथ AngularJS और Angular UI Router का उपयोग करने वालों के लिए, यहां मेरा समाधान है (मोलवे के टॉगल का उपयोग करके)। जहाँ ".navbar-main-पतन" मेरा "डेटा-लक्ष्य" है।

निर्देश बनाएँ:

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

निर्देश का उपयोग करें:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

Comments

लगता है कि आपने निर्देश को कक्षा में रखा है, क्या यह सही है?

— ग्रिंगो सुवे

लिंक फ़ंक्शन के अंदर निम्नलिखित काम करना चाहिए। element.on ('क्लिक', फंक्शन () {गुंजाइश.vm.isCollapsed =! गुंजाइश !vm.isCollapsed;});

— जिमीबेक

Answer 12

यह काम कर जाना चाहिए।

Bootstrap.js की आवश्यकता है।

उदाहरण => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

यह नेविगेशन मेनू टैग के लिए 'डेटा-टॉगल = "पतन" और' href = "yournavigationID" "विशेषताओं को जोड़ने जैसा ही कार्य करता है।

Comments

क्या आप उत्तर को थोड़ा और विस्तार से बता सकते हैं?

— ब्लंडरफेस्ट

क्या वह jQuery नहीं है? क्या यह आमतौर पर jQuery और कोणीय दोनों का उपयोग करने के लिए बुरा अभ्यास नहीं है?

— AlxVallejo

Answer 13

मैं मोलवे फ़ंक्शन का उपयोग कर रहा हूं, हालांकि मैंने 2 सुधार जोड़े हैं:

क) यदि लिंक पर क्लिक किया गया है तो ड्रॉपडाउन समापन से बचें (अन्य लिंक सहित)

ख) ड्रॉपडाउन को भी छिपाएं, यदि आप दृश्यमान वेब सामग्री को क्लिक कर रहे हैं।

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

Answer 14

नवीनतम थ्रेड नहीं, लेकिन मैंने उसी समस्या के लिए एक समाधान खोजा और एक (कुछ अन्य लोगों का मिश्रण) पाया।

मैंने नवबटन दिया:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

एक आईडी / पहचानकर्ता जैसे:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

बेहतरीन "आइडिया" नहीं - लेकिन: मेरे लिए काम करता है! अब आप अपने बटन की दृश्यता की जाँच कर सकते हैं (जैसे jquery के साथ):

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(नोट: यह सिर्फ एक कोड है! मैंने अपने नव लिंक पर एक "onclick" ईवेंट का उपयोग किया है! - (AJAX रेग्युस्ट शुरू करते हुए)

परिणाम है: यदि बटन "दिखाई दे रहा है" तो यह "क्लिक" हो गया ... तो: कोई बग नहीं अगर आप बूटस्ट्रैप के "फुलस्क्रीन दृश्य" (940px से अधिक की चौड़ाई) का उपयोग करते हैं।

अभिवादन राल्फ

पुनश्च: यह IE9, IE10 और फ़ायरफ़ॉक्स 25 के साथ ठीक काम करता है। Didnt दूसरों की जाँच की - लेकिन मैं एक समस्या नहीं देख सकता :-)

Answer 15

इसने मेरे लिए काम किया। मैंने ऐसा किया है, जब मैं मेनू बटन पर क्लिक करता हूं, तो 'में' वर्ग को जोड़ने या हटाने के लिए im करता हूं क्योंकि उस वर्ग को जोड़कर या हटाकर डिफ़ॉल्ट रूप से काम कर रहा है। 'e.stopPropagation ()' बूटस्ट्रैप द्वारा डिफ़ॉल्ट एनीमेशन को रोकने के लिए है (मुझे लगता है) आप क्लास जोड़ने या हटाने के स्थान पर 'टॉगलक्लास' का भी उपयोग कर सकते हैं।

$ ('# ChangeToggle')। ('क्लिक', फंक्शन (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

Answer 16

आप काऊ का उपयोग करें

ul.nav {
    display: none;
}

यह डिफ़ॉल्ट रूप से नावबार को बंद कर देगा। कृपया मुझे बताएं कि किसी को भी यह उपयोगी नहीं लगता है

Comments

समस्या यह है, यह "सामान्य रूप से" प्रदर्शित होने पर नौसेना को छुपाता है, उत्तरदायी मेनू में नहीं।

— फ्लोरियन

Answer 17

यदि उदाहरण के लिए आपका टॉगल-सक्षम आइकन केवल अतिरिक्त छोटे उपकरणों के लिए दिखाई देता है, तो आप ऐसा कुछ कर सकते हैं:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

[Data-toggle = "offcanvas"] पर क्लिक करने से मेरे # साइड-मेनू में बूटस्ट्रैप -hidden-xs जुड़ जाएगा जो साइड-मेनू सामग्री को छिपा देगा, लेकिन यदि आप विंडो का आकार बढ़ाते हैं तो यह फिर से दिखाई देगा।

Answer 18

अगर मेनू HTML है

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

कक्षा में 'टॉगल' को 'टॉगल' से जोड़ा और हटाया जाता है। जांचें कि यदि उत्तरदायी मेनू खोला गया है, तो करीब टॉगल करें।

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Answer 19

बिना किसी कंसोल त्रुटि के, नेवल क्लोज, IE ब्राउज़र संगत उत्तर टगले। यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो इसका उपयोग करें

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

Answer 20

$('.navbar-toggle').trigger('click');

Comments

मुझे समझ नहीं आता कि यह सही उत्तर क्यों नहीं है? जब भी आप उस क्लिक की घटना पर किसी भी मेनू लिंक पर क्लिक करते हैं तो आप मेनू को टॉगल कर सकते हैं जो मुझे लगता है कि सही तरीका है क्योंकि मैं मेनू खोलने या बंद करने के डिफ़ॉल्ट व्यवहार को नहीं बदल रहा हूं।

— अकीब

Answer 21

किसी भी जावास्क्रिप्ट के बिना बूटस्ट्रैप 4 समाधान

data-toggle="collapse" data-target="#navbarSupportedContent.show" Div में विशेषताएँ जोड़ें<div class="collapse navbar-collapse">

सुनिश्चित करें कि आप सही प्रदान idमेंdata-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show बड़े प्रस्तावों में मेनू टिमटिमा से बचने के लिए है

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <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>