दिलचस्प पोस्ट
जब फाइल करने के लिए पुनः निर्देशित किया जाता है तो stdout स्पष्ट रूप से फ्लशिंग की आवश्यकता क्यों है? मैं कैसे जांचूं अगर एक तत्व जावास्क्रिप्ट के साथ वास्तव में दिखाई दे रहा है? स्वयं शामिल क्या है और आप इसका उपयोग कब करेंगे? PHP – वर्तमान यूआरएल पार्स करें एक दृश्य के अंदर UIButton जिसमें एक UITapGestureRecognizer है बिट फ़ील्ड के निर्धारण के साथ एक संरचना का आकार निर्धारित / मापा जाता है? आइकलिंग <टी> वीएस लिस्ट <टी> इनटाइटी फ्रेमवर्क में boost_1_60_0 खिड़कियों में ज़िप स्थापना चींटी के साथ एक नई जार-फाइल निर्माण में बाह्य जार-फाइलें शामिल हैं एचटीएमएल 5 कैनवास पर एक ब्लररी सर्कल कैसे आकर्षित करें? जावा जेनेरिक – टाइप एराज़र – कब और क्या होता है स्विंग जावा में जेटेबल की एक पंक्ति में बटन कैसे जोड़ें Google मानचित्र एपीआई v3 का उपयोग करके सड़क पर पॉलीलाइन स्नैप सामग्री के आधार पर गतिशील रूप से ट्विटर बूटस्ट्रैप मोडल का आकार बदलने का तरीका स्विफ्ट सुपर धीमी टाइपिंग और स्वत: पूर्णता के साथ 6 Xcode

बूटस्ट्रैप 3 नेबबार संक्षिप्त करें

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

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

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

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

Solutions Collecting From Web of "बूटस्ट्रैप 3 नेबबार संक्षिप्त करें"

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

एसएपी आकार पर पतन को सक्रिय करने के लिए यहां एक सरल सीएसएस ही समाधान है:

@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; } } 

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

डेमो

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

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

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

संक्षिप्त बिंदु को अनुकूलित करें

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

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

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

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

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

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

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

यदि आप इसे बाद में विस्तार करना चाहते हैं, और कम पुन: संकलन के साथ सौदा नहीं करना चाहते हैं, तो आपको 768px मीडिया क्वेरी पर लागू की जाने वाली शैलियों को ओवरराइट करना होगा और उन्हें पिछले मान पर लौटा देना होगा। फिर उन्हें उचित समय पर फिर से जोड़ें

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

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

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

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

चीयर्स!

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

चर खोजें:

  @grid-float-breakpoint 

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

इन को चर में नियंत्रित किया जाता है, स्रोत के आस-पास गंदगी की कोई आवश्यकता नहीं है बूटस्ट्रैप के साथ, पहले चर की कोशिश करें, फिर ओवरराइड करें फिर वापस जाओ और फिर से चर का प्रयास करें;)

मैंने रेल के साथ bootstrap-sass का इस्तेमाल किया, लेकिन यह डिफ़ॉल्ट कम के साथ ही है।

 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

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

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

इसका कारण यह है कि collapse.in क्लास के द्वारा ओवरलैड किया जाता है! नावर-पतन। महत्वपूर्ण में, और "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; } } 

मैं जंबर्टुसी के उत्तर को ऊपर उठाने और टिप्पणी करना चाहता था, लेकिन मुझे अभी तक नियंत्रणों के साथ भरोसा नहीं करना है मेरे पास एक ही मुद्दा था और उसने इसे सुलझाने के लिए कहा था। यदि आप बूटस्ट्रैप 3.0 का उपयोग कर रहे हैं, तो चर में कम वैरिएबल को संपादित करें। उत्तरदायी ब्रेक पॉइंट लाइन 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 लाइन के बारे में @ ग्रीड-फ़्लोट-ब्रेकपॉइंट चर का प्रयोग करके नेवबार के लिए पतन का मान सेट करें। डिफ़ॉल्ट रूप से इसे @ स्क्रीन-टैबलेट पर सेट किया गया है यदि आप चाहते हैं कि आप पिक्सेल मूल्य का उपयोग कर सकते हैं, लेकिन मैं कम चर का उपयोग करना पसंद करता हूं

यदि आपकी समस्या का सामना करना मेनू एकाधिक पंक्तियों में तोड़ना है , तो आप निम्न में से एक कोशिश कर सकते हैं:

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; 

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

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

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

यहां छवि विवरण दर्ज करें

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

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

मुझे काफी समझ में नहीं आ रहा है कि सेब 33300 का दृष्टिकोण काम कैसे कर सकता है, यद्यपि। यह निश्चित रूप से बूटस्ट्रैप 4.0.3 के साथ काम नहीं कर रहा था। 760 के बजाय 1200 में विस्तार करने के लिए एनएवी बार के लिए, दोनों प्रश्नों के लिए नियम 768 पर विस्तार करने और 1200 पर विस्तार करने के लिए मीडिया प्रश्नों को ओवरराइड किया जाना चाहिए।

मेरे पास एक लंबा मेनू है जो iPad पर पोर्ट्रेट मोड में लपेटता है I निम्नलिखित में 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; } } 

मैं बूटस्ट्रैप 3.0.0 की स्थापना के साथ सीएसएस तरीके से किया, क्योंकि मैं कम से परिचित नहीं हूं। यहां कोड है जिसे मैंने अपनी कस्टम सीएसएस फाइल में जोड़ा है (जो मैं bootstrap.css के बाद लोड करता हूं) जो मुझे नियंत्रित करने की अनुमति देता था ताकि मेन्यू हमेशा एक accordion जैसा काम कर सके।
नोट: मैंने अपने संपूर्ण navbar को एक sidebar अंदर वर्ग 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 बार होगा तो मुझे लगता है कि आपको इसके बारे में चिंता करने की आवश्यकता नहीं होगी, लेकिन यह मेरे मामले में मेरी मदद की।

और जो मानक 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; } } 

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

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

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

 @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 } } 

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

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