बूटस्ट्रैप 3 नवबार पतन

Question

क्या उस बिंदु को बढ़ाने का कोई तरीका है जिस पर बूटस्ट्रैप 3 नेवबर ढह जाता है (यानी ताकि यह पोर्ट्रेट टैबलेट पर एक बूंद में गिर जाए)?

ये दोनों बूटस्ट्रैप 2 के लिए लागू थे, लेकिन अब नहीं!

ट्विटर बूटस्ट्रैप-उत्तरदायी का उपयोग करते हुए नेवर पतन थ्रेशोल्ड को कैसे बदलें?

डिफ़ॉल्ट उत्तरदायी नावबार ब्रेकपॉइंट बदलें

Comments

वे लागू क्यों नहीं हैं?

— पीडब्लू कद

यह मेरे लिए है कि कोड ही काफी बदल गया था

— timhc22

मैं काफी फॉलो नहीं करता। CSS कोड आपका मतलब है? कक्षाएं आम तौर पर कुछ मामूली मोड़ के साथ समान होनी चाहिए

— पीडब्लू कड

चिंता मत करो मुझे लगता है कि मैं अनुकूलित डाउनलोड के कारण भ्रमित हो रहा था (उत्तरों में से एक मैंने एक विशिष्ट लाइन नंबर को संपादित करने के लिए एक लिंक पोस्ट किया है)

— timhc22

stackoverflow.com/a/23536146/563309 - मेरे लिए काम किया है, किसी की मदद करेगा ...

— JenonD

Answer 1

मुझे आज भी यही समस्या थी।

बूटस्ट्रैप ४

यह एक मूल कार्यक्षमता है: https://getbootstrap.com/docs/4.0/compenders/navbar/#responsive-behaviors

आपको .navbar-expand{-sm|-md|-lg|-xl}कक्षाओं का उपयोग करना होगा:

<nav class="navbar navbar-expand-md navbar-light bg-light">

बूटस्ट्रैप ३

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

बस बदलने के 991pxद्वारा 1199pxके लिए mdआकार।

डेमो

Comments

.navbar-collapse.collapse.in { display: block!important; }इसे गायब होने से रोकने के लिए जोड़ना था । अच्छी नौकरी हालांकि, मुझे घंटों बचाया।

— डेव फोर्बर

महान विकल्प लेकिन जोड़ने के लिए .navbar-पतन.collapse.in {प्रदर्शन: ब्लॉक! महत्वपूर्ण; मार्जिन-टॉप: 0px; }

— मेविस

इसके बारे में मुझे जो पसंद है वह यह है कि अगर मैं बूटस्ट्रैप को अपग्रेड करता हूं, तो मुझे वैरिएबल को ढूंढने और उसे पुनः प्राप्त करने के बारे में चिंता करने की आवश्यकता नहीं है।

— स्कूबा सेतेव

लेकिन ड्रॉपडाउन अभी भी डेस्कटॉप मोड में थे, मुझे अधिकतम 39-लाइन पर कोड को एडिट करना पड़ा: 992 (बूटस्ट्रैप में। बूट्स), मैं बूटस्ट्रैप 3.2 का उपयोग कर रहा हूं। बस अगर किसी को इसकी जरूरत है।

— चंदन

यह dropdown-menuनौसेना पट्टी में आइटम को संभालने के लिए प्रतीत नहीं होता है ।

— एलेक्सव

Answer 2

बूटस्ट्रैप 2 और बूटस्ट्रैप 3 के बीच बड़ा अंतर यह है कि बूटस्ट्रैप 3 "मोबाइल पहले" है।

इसका मतलब है कि डिफ़ॉल्ट शैलियों को मोबाइल उपकरणों के लिए डिज़ाइन किया गया है और नवबारों के मामले में, इसका मतलब है कि यह डिफ़ॉल्ट रूप से "ढह" गया है और जब यह एक निश्चित न्यूनतम आकार तक पहुंच जाता है।

बूटस्ट्रैप 3 की साइट में वास्तव में एक "संकेत" है कि क्या करना है: http://getbootstrap.com/compenders/#nnbar

ढहने के बिंदु को अनुकूलित करें

आपके नावबार में मौजूद सामग्री के आधार पर, आपको उस बिंदु को बदलने की आवश्यकता हो सकती है जिस पर आपका नावबार ढह और क्षैतिज मोड के बीच स्विच करता है। @ ग्रिड-फ्लोट-ब्रेकप्वाइंट चर को अनुकूलित करें या अपनी खुद की मीडिया क्वेरी जोड़ें।

यदि आप अपने LESS को फिर से संकलित करने जा रहे हैं, तो आपको variables.lessफ़ाइल में विख्यात लेस चर मिलेगा । यह वर्तमान में "विस्तार" के लिए सेट है @media (min-width: 768px)जो कि बूटस्ट्रैप 3 शब्दों द्वारा एक "छोटी स्क्रीन" (यानी एक टैबलेट) है।

@grid-float-breakpoint: @screen-tablet;

यदि आप ढह गए को थोड़ी देर रखना चाहते हैं तो आप इसे इस तरह समायोजित कर सकते हैं:

@grid-float-breakpoint: @screen-desktop; (992px ब्रेक-पॉइंट)

या जल्द ही विस्तार

@grid-float-breakpoint: @screen-phone (480px ब्रेक-पॉइंट)

यदि आप इसे बाद में विस्तारित करना चाहते हैं, और LESS को फिर से संकलित नहीं करते हैं, तो आपको उन शैलियों को अधिलेखित करना होगा जो 768pxमीडिया क्वेरी में लागू होते हैं और उन्हें पिछले मान पर वापस लाते हैं। फिर उचित समय पर उन्हें फिर से जोड़ें।

मुझे यकीन नहीं है कि यह करने के लिए एक बेहतर तरीका है। अपनी आवश्यकताओं के लिए बूटस्ट्रैप लेस का पुनर्कथन करना सबसे अच्छा (सबसे आसान) तरीका है। अन्यथा, आपको उन सभी सीएसएस मीडिया प्रश्नों को ढूंढना होगा जो आपके नवबार को प्रभावित करते हैं, उन्हें डिफ़ॉल्ट शैलियों @ 768px चौड़ाई पर अधिलेखित करें और फिर उन्हें एक उच्च न्यूनतम चौड़ाई पर वापस लाएं।

कम से कम परिवर्तन आपके लिए सिर्फ चर बदलकर वह जादू करेगा। जो कि LESS / SASS के प्री-कंपाइलर्स की बात है। =)

(ध्यान दें, मैंने उन सभी को देखा, यह लगभग 100 पंक्तियों की कोड है, जो मेरे लिए विचार को छोड़ने और किसी दिए गए प्रोजेक्ट के लिए बूटस्ट्रैप को फिर से संकलित करने के लिए पर्याप्त रूप से नाराज़ है) और दुर्घटना से कुछ गड़बड़ करने से बचें।

मुझे आशा है कि वह मदद करेंगे!

चीयर्स!

Comments

बूटस्ट्रैप डिफ़ॉल्ट और अनुकूलित संस्करणों के बीच क्या अंतर है? उनकी फ़ोल्डर संरचनाएं काफी भिन्न हैं और अनुकूलित संस्करण एक में केवल CSS और JS फाइलें हैं जो डिफ़ॉल्ट संस्करण में बहुत सारे फ़ोल्डर हैं जिनमें LESS शामिल है। मैं कुछ उलझन में हूं।

— राहुल पटवा

@RahulPatwa यदि आप पूर्ण बूटस्ट्रैप 3 ज़िप को डाउनलोड करते हैं, तो आपको इसके साथ सभी विकास फाइलें मिलने वाली हैं। ये वे फाइलें हैं जिनका उपयोग लोग बूटस्ट्रैप को जारी रखने के लिए करते हैं और इसमें कंपोजर और ग्रंट वर्क फाइल्स, गिट सिस्टम फाइल, LESS फाइल आदि शामिल हैं। पूरी फाइलें / डिस्ट फ़ोल्डर में स्थित हैं। आप के लिए फ़ोल्डरों देखेंगे /css, /js, /fonts। इसे कस्टमाइज़ करने से आपके द्वारा चुनी गई संकलित फ़ाइलें मिल जाती हैं।

— १२:४३ बजे

इसलिए अगर मैं पूर्ण बूटस्ट्रैप डाउनलोड करता हूं और फिर कम चर में कुछ बदलाव करता हूं .. तो मैं इसे सीएसएस फ़ाइल में कैसे संकलित कर सकता हूं?

— राहुल पटवा

@RahulPatwa LESS को संकलित करने के कई तरीके हैं। कम वेबसाइट बताते हैं दोनों एक ग्राहक और सर्वर साइड विधि से कैसे। क्रंच एक साधारण GUI है जिसका आप उपयोग कर सकते हैं। बूटस्ट्रैप की वेबसाइट विशेष रूप से उनके RECESS उपकरण का उपयोग करने की सलाह देती है । और वहाँ अधिक है ।

— jmbertucci

सबसे आसान तरीका है बस में जाने के लिए है getbootstrap.com/customize \ को फिर से परिभाषित @ तरह \ @ स्क्रीन XS मिनट एक छोटे स्क्रीन आकार के लिए कुछ hardcoded के लिए ग्रिड फ्लोट-ब्रेकप्वाइंट मूल्य (जैसे 520px) या

— नेवेस

Answer 3

सबसे आसान तरीका बूटस्ट्रैप को अनुकूलित करना है

परिवर्तनशील खोजें:

 @grid-float-breakpoint

जो @ स्क्रीन-एसएम पर सेट है, आप इसे अपनी आवश्यकताओं के अनुसार बदल सकते हैं। आशा करता हूँ की ये काम करेगा!

Comments

इसे बहुत छोटे मान पर सेट करना जैसे कि 1px नेवॉबर कोलैपिंग को अक्षम कर देगा (जैसे यदि आप एक गैर-उत्तरदायी नेवबार चाहते हैं)।

— ग्रेगर गुलाम

मैंने इसे 480x तक ढह गए मेनू को सीमित करने के लिए '@ स्क्रीन-एक्स-मिनट' पर भी सेट किया है। कुछ साइटों के लिए यह अच्छी तरह से काम करता है और एक अच्छा प्रभाव बनाता है जहां आप आसानी से पूर्ण मेनू से iPhone पर एक ढहने वाले को उन्मुखीकरण बदलकर बदल सकते हैं।

— चियाप्पा

Answer 4

इन्हें चर में नियंत्रित किया जाता है, स्रोत में इधर-उधर घूमने की आवश्यकता नहीं होती है। बूटस्ट्रैप के साथ, पहले चर प्रयास करें, फिर ओवरराइड करें। फिर वापस जाएं और चर को फिर से आज़माएँ;)

मैंने रेल्स-सैस का उपयोग रेल के साथ किया, लेकिन यह डिफ़ॉल्ट LESS के साथ समान है।

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

बस! यह चर संदर्भ पृष्ठ सुपर उपयोगी है: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Comments

इतना साफ। महान समाधान। धन्यवाद।

— जेदिदिया हर्ट

Answer 5

Seb33300 के लिए धन्यवाद मुझे यह काम मिला। हालांकि, एक महत्वपूर्ण हिस्सा याद आ रहा है। कम से कम बूटस्ट्रैप संस्करण 3.1.1 में।

मेरी समस्या यह थी कि नौबर सही चौड़ाई के अनुसार ढह गई, लेकिन मेनू बटन ने काम नहीं किया। मैं मेनू का विस्तार और पतन नहीं कर सका।

इसका कारण यह है कि पतन.in वर्ग .navbar-पतन.collapse में महत्वपूर्ण से आगे निकल गया है और "पतन.in" को जोड़कर भी इसे हल किया जा सकता है। Seb33300 का उदाहरण नीचे दिया गया है:

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Comments

बूटस्ट्रैप 3.3.6 के लिए प्रीफेक्ट मानक सीएसएस समाधान, धन्यवाद!

— xxxbence

Answer 6

मैं jmbertucci के उत्तर पर टिप्पणी करना और टिप्पणी करना चाहता था, लेकिन मुझे अभी नियंत्रणों पर भरोसा नहीं है। मेरे पास एक ही मुद्दा था और उसने जैसा कहा, उसे हल किया। यदि आप बूटस्ट्रैप 3.0 का उपयोग कर रहे हैं, तो चर में LESS वेरिएबल्स को संपादित करें। जब तक कि गोल 200 के आसपास उत्तरदायी ब्रेक पॉइंट सेट न हो जाएं:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

फिर @ ग्रिड-फ्लोट-ब्रेकपॉइंट चर के बारे में लाइन 232 पर उपयोग करते हुए नावबार के लिए पतन मान सेट करें । डिफ़ॉल्ट रूप से यह @ स्क्रीन-टैबलेट पर सेट है । यदि आप चाहते हैं कि आप एक पिक्सेल मान का उपयोग कर सकते हैं, लेकिन मैं LESS चर का उपयोग करना पसंद करता हूं।

Comments

ध्यान दें कि आकार अब पदावनत हैं, और जो भी शेष हैं वे सभी -minहैं: @ स्क्रीन-एमडी-मिनट: 800 पीएक्स; @ स्क्रीन- lg-min: 1200px; @ ग्रिड-फ्लोट-ब्रेकप्वाइंट: @ स्क्रीन-एमडी-मिनट;

— डग ली

Answer 7

यदि आप जिस समस्या का सामना कर रहे हैं वह कई लाइनों में टूटने वाला मेनू है , तो आप निम्न में से एक का प्रयास कर सकते हैं:

1) मेनू आइटम या उनकी लंबाई कम करने की कोशिश करें, जैसे मेनू आइटम हटाना या शब्दों को छोटा करना।

2) इस तरह से मेनू आइटम के बीच पैडिंग को कम करना:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

डिफ़ॉल्ट पैडिंग दोनों पक्षों (बाएं और दाएं) 15px है।

यदि आप प्रत्येक व्यक्ति के साइड इफेक्ट को बदलना पसंद करते हैं:

padding-left: 7px; 
padding-right: 8px;

यह सेटिंग ड्रॉपडाउन सूची को भी प्रभावित करती है।

यह सवाल का जवाब नहीं देता है, लेकिन यह उन लोगों की मदद कर सकता है जो सीएसएस के साथ गड़बड़ नहीं करना चाहते हैं या कम चर का उपयोग कर रहे हैं। इस समस्या को हल करने के लिए दो सामान्य दृष्टिकोण।

Answer 8

नबवर छोटे उपकरणों पर गिर जाएगा। टकराने की बात को चर में ग्रिड-फ्लोट-ब्रेकप्वाइंट द्वारा परिभाषित किया गया है। डिफ़ॉल्ट रूप से यह 768px से पहले होगा। 768 पिक्सेल स्क्रीन की चौड़ाई से नीचे की स्क्रीन के लिए, नेवबार जैसा दिखेगा:

यह चर-फ़्लोट-ब्रेकप्वाइंट को वैरिएबल्स में बदलना संभव है। ऐसा करते समय आपको navbar.less में @ स्क्रीन-एक्स-मैक्स को भी बदलना होगा। आपको यह मान अपने नए @ ग्रिड-फ्लोट-ब्रेकप्वाइंट -1 पर सेट करना होगा। यह भी देखें: https://github.com/twbs/bootstrap/pull/10465 । इसके लिए @ ग्रिड-फ्लोट-ब्रेकपॉइंट पर उनके मोबाइल संस्करण में भी नावबार के रूपों और ड्रॉपडाउन को बदलने की आवश्यकता है।

Comments

आप स्टाइलस का उपयोग कैसे करते हैं? क्या आप github.com/Acquisio/bootstrap-stylus का उपयोग करते हैं । आखिरी स्थिति में आपको ऊपर जैसा होना चाहिए। बूटस्ट्रैप-स्टाइल डाउनलोड करें, स्टाइलस / वैरिएबल.स्टाइल आदि में सेटिंग बदलें और recompile करें।

— बास जॉब्सन

Answer 9

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

मैं समझ नहीं पा रहा हूँ कि Seb33300 का तरीका कैसे काम कर सकता है। यह निश्चित रूप से बूटस्ट्रैप 4.0.3 के साथ काम नहीं करता था। नेवी बार के लिए 768 के बजाय 1200 पर विस्तार करने के लिए, दोनों मीडिया क्वेरी के नियमों को ओवरस्ट्रीम 768 पर विस्तार को रोकने और 1200 पर विस्तार करने के लिए बाध्य किया जाना चाहिए।

मेरे पास एक लंबा मेनू है जो पोर्ट्रेट मोड में iPad पर लपेटेगा। निम्नलिखित 1200 टूटने तक मेनू को ढहाए रखता है:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Answer 10

मैंने बूटस्ट्रैप 3.0.0 की अपनी स्थापना के साथ सीएसएस तरीका किया, क्योंकि मैं लेस से परिचित नहीं हूं। यहाँ वह कोड है जो मैंने अपने कस्टम css फ़ाइल में जोड़ा है (जो कि मैं bootstrap.css के बाद लोड करता हूं) जो मुझे नियंत्रित करने की अनुमति देता है ताकि मेनू हमेशा ए की तरह काम कर सके accordion।
नोट: मैंने अपने पूरे navbarडिव को एक वर्ग के साथ लपेट sidebarकर व्यवहार को अलग करने के लिए जो मुझे चाहिए था, ताकि मुख्य मेनू की तरह मेरी साइट पर अन्य नाविकों को प्रभावित न करें। अपनी आवश्यकताओं के साथ समायोजित करें, आशा है कि यह मदद का है।

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

अतिरिक्त नोट: मैंने मुख्य मेनू के टॉगल में एक बदलाव भी जोड़ा है navbar(क्योंकि मेरी साइट पर ऊपर दिए गए कोड का उपयोग साइड में "सबमेनू" के लिए किया गया है।

मैं बदल गया:

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

में:

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

और फिर भी समायोजित:

<div class="navbar-collapse collapse navbar-collapse">

में:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

यदि आपके पास केवल एक ही होगा जो navbarमुझे लगता है कि आपको इस बारे में चिंता करने की आवश्यकता नहीं होगी, लेकिन इसने मेरे मामले में मेरी मदद की।

Answer 11

और जो मानक 768px से कम चौड़ाई में गिरना चाहते हैं (768px से कम चौड़ाई में विस्तार), यह सीएसएस की जरूरत है:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Answer 12

मुझे लगता है कि मुझे सीएसएस के माध्यम से केवल पतन ब्रेकपॉइंट को बदलने का एक सरल समाधान मिला।

मुझे आशा है कि अन्य लोग इसकी पुष्टि कर सकते हैं क्योंकि मैंने इसे पूरी तरह से परीक्षण नहीं किया है और मुझे यकीन नहीं है कि इस समाधान के दुष्प्रभाव हैं।

आपको निम्न वर्ग परिभाषाओं के लिए मीडिया क्वेरी मान बदलना होगा:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

यह मेरे वर्तमान प्रोजेक्ट पर मेरे लिए काम कर रहा है, लेकिन मुझे अभी भी सभी स्क्रीन आकारों के लिए मेनू को ठीक से व्यवस्थित करने के लिए कुछ सीएसएस परिभाषाओं को बदलने की आवश्यकता है।

उम्मीद है की यह मदद करेगा।