ट्विटर बूटस्ट्रैप 3 नेवबार पतन - सेट चौड़ाई संक्षिप्त करने के लिए

Question

मैं navbar-collapse साथ ट्विटर Bootsrap 3 का उपयोग करें: http://bootply.com/91119

जब आप पृष्ठ की चौड़ाई को कम करने, मेनू दो पंक्तियों में विभाजित हो, और बाद में पतन। मैं दो लाइनों में विभाजित नहीं हूं, लेकिन पतन करना चाहता हूं। मैं क्या करूँ?

Answer 1

आप बिंदु है जिस पर नेवबार गिर कम कर सकते हैं ..

विकल्प 1

बूटस्ट्रैप डॉक्स (http://getbootstrap.com/components/#navbar)

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

विकल्प 2

आप एक कस्टम बूटस्ट्रैप निर्माण नहीं करना चाहते हैं, तो आप एक सीएसएस मीडिया क्वेरी का उपयोग कर सकते हैं। उदाहरण के लिए यहाँ ब्रेकपाइंट सेट कर रहा है एक 1280 पिक्सेल: बूटस्ट्रैप 3,1

के लिए

@media (max-width: 1280px) { 
    .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; 
    } 
} 

http://www.bootply.com/98488

अद्यतन 3.1 में नेवबार बदल गया है, तो सीएसएस ब्रेकप्वाइंट ओवरराइड करने के लिए तुलना में अलग है 3.0। यह नेवबार दिखा और उसके बाद से अचानक 3.1 http://www.bootply.com/120604