लेस का उपयोग किए बिना बूटस्ट्रैप नवबार पतन विराम बिंदु बदलें

Question

वर्तमान में जब ब्राउज़र की चौड़ाई 768px से कम हो जाती है, तो नावबार ढह मोड में बदल जाता है। मैं इस चौड़ाई को 1000 पीएक्स में बदलना चाहता हूं ताकि जब ब्राउजर 1000 पीएक्स से नीचे हो जाए तो नावबार ढह गई मोड में बदल जाए। मैं LESS का उपयोग किए बिना ऐसा करना चाहता हूं, मैं स्टाइलस का उपयोग कर रहा हूं LESS का नहीं।

मेरा प्रश्न इस प्रश्न में समान है: बूटस्ट्रैप 3 नवबार संक्षिप्त

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

धन्यवाद!

Answer 1

आपको इसके लिए एक विशिष्ट मीडिया क्वेरी लिखनी होगी , आपके प्रश्न से, 768px के नीचे, नेवबार ढह जाएगा, इसलिए इसे 768px से ऊपर और 1000px से नीचे लागू करें, ठीक उसी तरह:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

यह बूटस्ट्रैप इकाई की डिफ़ॉल्ट घटना तक नेवबार के ढहने को छिपा देगा। के रूप में पतन वर्ग flips के अंदर नेबर पतन के अंदर संपत्ति स्वचालित रूप से छिपा दिया जाएगा, बुद्धिमान की तरह आप अपने सीएसएस सेट के रूप में आप वांछित डिजाइन है।

Comments

वर्तमान में जब चौड़ाई 768px से कम होती है तो नावबार ढह जाता है। लेकिन मैं चाहता हूं कि चौड़ाई 1000px से कम होने पर नेवबार ढह जाए। इसके लिए, आपको 768 और 1000 के बीच शोकेस करने की आवश्यकता नहीं होगी?

— नज़दीकी

हां, collapseमोबाइल स्क्रीन के लिए क्लास महत्वपूर्ण है ताकि अगर चौड़ाई 768px से नीचे हो display:noneतो नेवबार होगा , इसलिए आवश्यक कार्रवाई 768 और 1000 के निशान के अंदर लागू होगी ...

— सौरभ

यह बूटस्ट्रैप 3 पर काम नहीं करता है क्योंकि इसका एक और नियम navbar-collapse.collapseहै display: block !important। डिसेबल करने से परिणाम ध्वस्त हो जाएगा बटन दिखाई नहीं दे रहा है ... इसलिए मुझे लगता है कि यह बहुत सारी कक्षाएं हैं जिन्हें पुनर्परिभाषित करने की आवश्यकता है, न कि सिर्फcollapse

— डेनियल रिकसी

हां, कस्टम मीडिया क्वेरी में बूटस्ट्रैप कक्षाओं का एक समूह ओवरराइड किया जाना चाहिए: bootply.com/120604

— Zim

हाहा किसने बूटस्ट्रैप बनाया? नहीं सोचा था कि हम उस छोटे से विस्तार को बदलने की आवश्यकता होगी?

— MH

Answer 2

2018 अद्यतन

बूटस्ट्रैप ४

navbar-expand-*कक्षा का उपयोग करके बूटस्ट्रैप 4 में नौबार ब्रेकपॉइंट बदलना आसान है :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = x स्क्रीन पर मोबाइल मेनू <576px
• navbar-expand-md = स्क्रीन पर मोबाइल मेनू <768px
• navbar-expand-lg = एमडी स्क्रीन पर मोबाइल मेनू <992px
• navbar-expand-xl = lg स्क्रीन पर मोबाइल मेनू <1200px
• navbar-expand = कभी भी मोबाइल मेनू का उपयोग न करें
• (no expand class) = हमेशा मोबाइल मेनू का उपयोग करें

यदि आप बाहर navbar-expand-*करते हैं तो मोबाइल मेनू का उपयोग allचौड़ाई में किया जाएगा । यहां सभी 6 नवबार राज्यों का एक डेमो है: बूटस्ट्रैप 4 नवबर उदाहरण

आप थोड़ा सीएसएस जोड़कर एक कस्टम ब्रेकपॉइंट (??? px) का भी उपयोग कर सकते हैं। उदाहरण के लिए, यहाँ 1300px ।।

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

बूटस्ट्रैप 4 कस्टम नवबार ब्रेकपॉइंट
बूटस्ट्रैप 4 नवबार ब्रेकपॉइंट उदाहरण

---

बूटस्ट्रैप ३

बूटस्ट्रैप 3.3.x के लिए, यहां नेवर ब्रेकपॉइंट को ओवरराइड करने के लिए काम कर रहा सीएसएस है। 991pxउस बिंदु के पिक्सेल आयाम में परिवर्तन करें जिस पर आप चाहते हैं कि नावबार ढह जाए ...

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

991px के लिए काम करने का उदाहरण: http://www.bootply.com/j7XJuaE5v6
1200px के लिए काम करने का उदाहरण: https://www.codeply.com/go/VsYaOLzfb4 (खोज फ़ॉर्म के साथ)

नोट: उपरोक्त किसी भी चीज़ के लिए 768px से अधिक काम करता है । यदि आपको इसे 768px से कम में बदलने की आवश्यकता है, तो 768px से कम का उदाहरण यहाँ है ।

---

Comments

इस प्रथम यात्रा का प्रयास करें: [लिंक] ( getbootstrap.com/customize पता लगाएँ: 'कम चर' -> 'मीडिया क्वेरीज़ ब्रेकपॉइंट्स' बदलें: @ स्क्रीन- lg मान 1200px से 1920px तक लोकेट: "ग्रिड सिस्टम"> @ ग्रिड-फ्लोट -breakpoint बदलें:।। @ स्क्रीन SM-मिनट @ करने के लिए स्क्रीन-एलजी स्क्रॉल पेज के समाप्त करने के लिए "संकलित करें और डाउनलोड" निकालें पर क्लिक करें और का उपयोग इन डाउनलोड की गई फ़ाइलें

— rpalzona

यह उपरोक्त कोड तब काम करता है जब मैं 768px से अधिक मूल्य निर्धारित करता हूं, हालांकि मुझे रिवर्स प्राप्त करने की आवश्यकता है ... मैं केवल 400px पर उदाहरण के लिए इसे संक्षिप्त करना चाहता हूं, लेकिन जब मैंने यह मान सेट किया, तो बूटस्ट्रैप मूल 768 को चुन रहा है - कोई विचार? धन्यवाद

— क्रिस रिचर्ड्स

हालांकि यह जवाब आकर्षण की तरह काम करता है, लेकिन यह ड्रॉपडाउन मेनू के साथ खिलवाड़ है , शायद आपको जवाब में सुधार करने की आवश्यकता है।

— अभिषेक पांडेय

@ अभिषेक पांडेय ने इस उत्तर (ड्रॉपडाउन के बारे में) को उपयोगी पाया है

— cbuchart

धन्यवाद। इसके आगे वाले चेकमार्क के साथ "समाधान" के विपरीत, आपका कोड वास्तव में काम करता है।

— माइकल एस। मिलर

Answer 3

में Bootstrap3 , इस चर बदलने ग्रिड फ्लोट-ब्रेकप्वाइंट @ एक आप की जरूरत है। डिफ़ॉल्ट मान 768px है

Comments

क्या आप एक उदाहरण पोस्ट कर सकते हैं?

— e.thompsy

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

— मकिस के।

कृपया ऐसा कैसे करें का एक उदाहरण जोड़ें ... मैं बूटस्ट्रैप के लिए नया हूं, और grep से मेरी परियोजना में इस चर के 0 उदाहरणों का पता चलता है।

— मैट क्लार्क

@MattClark @grid-float-breakpointको कंपाइलर पर परिभाषित किया गया है: getbootstrap.com/customize - डिफ़ॉल्ट मान है, @screen-sm-minलेकिन आप इसे बदल सकते हैं 1234px।

— रयबो १११

Answer 4

अंत में http://getbootstrap.com/customize/ पर '@ ग्रिड-फ्लोट-ब्रेकप्वाइंट' के साथ फ़िडलिंग द्वारा पतन चौड़ाई को कैसे बदलना है, इस पर काम किया ।

Bootstrap.css (भी न्यूनतम संस्करण) में लाइन 2923 पर जाएं और बदल @media screen and (min-width: 768px) {दें@media screen and (min-width: 1000px) {

तो कोड समाप्त हो जाएगा:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Comments

यदि आपने कस्टमाइज़र का उपयोग किया है तो नोट की गई पंक्ति संख्या अलग होगी: getbootstrap.com/customize

— henrywright

बस @grid-float-breakpointमेरे responsive.lessलिए मेरे कामों में बदलाव आया !

— cvng

आपको बूटस्ट्रैप सीएसएस फ़ाइलों को सीधे बदलने के बजाय किसी अन्य सीएसएस फ़ाइल में ओवरराइड करना चाहिए।

— इवांका टोडोरोवा

पहली यात्रा: [लिंक] ( getbootstrap.com/customize पता लगाएँ: 'कम चर' -> 'मीडिया क्वेरीज़ ब्रेकपॉइंट्स' बदलें: @ स्क्रीन-lg मान 1200px से 1920px तक लोकेट करें: "ग्रिड सिस्टम" -> ग्रिड-फ्लोट-ब्रेकप्वाइंट परिवर्तित करें:।। @ स्क्रीन SM-मिनट @ करने के लिए स्क्रीन-एलजी स्क्रॉल पेज के समाप्त करने के लिए "संकलित करें और डाउनलोड" निकालें पर क्लिक करें और इन डाउनलोड की गई फ़ाइलों का उपयोग

— rpalzona

Answer 5

मैंने निम्नलिखित सीएसएस कोड का उपयोग करके इसे सफलतापूर्वक किया।

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Comments

यह चौड़ाई के मेनू बटन को नहीं दिखाता है जब चौड़ाई 768px से 1000px के बीच होती है।

— शिल्पकार

@ क्राफ्ट्समैन: बटन के लिए, इसका उपयोग करें: .navbar- टॉगल {डिस्प्ले: ब्लॉक! महत्वपूर्ण! } .navbar- हेडर {चौड़ाई: 100%; ऊंचाई: 60 पीएक्स; }

— अनिकेत सूर्यवंशी

अभी भी हैमबर्गर मेनू के अंदर की सामग्री नहीं दिखती है

— बेहज़ाद

Answer 6

बूटस्ट्रैप 3 .LESS स्रोत कोड में , एक चर परिभाषित किया गया है variables.lessजिसे @grid-float-breakpointनिम्नलिखित सहायक टिप्पणी है:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

मिलान @grid-float-breakpoint-maxमान उस शून्य से 1px पर सेट है:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

उपाय:

तो बस सेट @grid-float-breakpointके बजाय 1000px तक मूल्य और पुनर्निर्माण bootstrap.lessमें bootstrap.css:

जैसे

@grid-float-breakpoint: 1000px;

Comments

पुनर्निर्माण कैसे करें? मैंने इस कमांड लाइन की कोशिश की: $ lessc bootstrap.less bootstrap.cssलेकिन कुछ भी नहीं हुआ

— एंथनीआर

@AnthonyRn: मुझे नहीं पता कि आपका प्रोजेक्ट सेटअप क्या है। मैंने अपने वीएस 2013 प्रोजेक्ट में बस बूटस्ट्रैप लेस स्रोत को अपडेट किया और इसे सेव पर फिर से बनाया। शायद आपको एक नया सवाल पूछना चाहिए?

— कोडिंग हो गया

मेरी समस्या बूटस्ट्रैप के ऑनलाइन कस्टमाइज़र टूल का उपयोग करके हल की गई थी यहां getbootstrap.com/customize समाधान के लिए धन्यवाद!

— एंथनीआर

मुझे लगता है कि यह स्वीकृत जवाब होना चाहिए, क्योंकि यह ब्रेकप्वाइंट को परिभाषित करने के लिए खुद के तरीकों का उपयोग करता है। एक उदाहरण के रूप में, मैं बूटस्ट्रैप को सरल was पुनर्निर्माण ’करने में सक्षम था, और इस चर को सेट करके वांछित परिणाम प्राप्त किया है कि मुझे ब्रेकपॉइंट की आवश्यकता क्या थी।

— सर्ज मेलिस

@AnthonyR पुनर्निर्माण करने के लिए आप grunt distग्रंट कमांड का उपयोग करते हैं जो डिस्टर्ब डायरेक्टरी को फिर से बनाएगा। आप उस कमांड को उस डायरेक्टरी से चलाएंगे जहाँ आपके पास अपना gruntfile.js है। संदर्भ: getbootstrap.com/getting-started/#grunt

— Radmation

Answer 7

बूटस्ट्रैप चर को बदलने का Sass तरीका वास्तव में बूटस्ट्रैप-सैस जीथब पृष्ठ पर प्रलेखित है ।

@Import बूटस्ट्रैप से पहले चर को फिर से परिभाषित करें:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Answer 8

@Skely जवाब के अलावा, नेबार के काम के अंदर ड्रॉपडाउन मेनू बनाने के लिए, उनकी कक्षाओं को भी जोड़ना होगा। अंतिम कोड bellow:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

डेमो कोड

Answer 9

बूटस्ट्रैप v4 में, नेविगेशन को जल्द ही या बाद में अलग-अलग सीएसएस कक्षाओं का उपयोग करके ध्वस्त किया जा सकता है

उदाहरण के लिए:

• नेवबार-toggleable-एस.एम.
• नेवबार-toggleable-md
• नेवबार-toggleable-एलजी

नेविगेशन के लिए बटन के साथ:

• छुपा-SM-अप
• छुपा-MD-अप
• छिपे हुए एलजी-अप

Comments

वर्तमान अल्फा में, केवल navbar-toggleable-smमेरे लिए जाना लगता है , xsयह कभी भी टॉगल नहीं करता है। क्या मैं कुछ गलत कर सकता हूं। धन्यवाद!

— nddwaller

@nerdwaller को लगता है कि आप सही हैं, xs से लेकर sm तक का संपादन किया।

— 19-12 में व्हाइटनीलैंड

Answer 10

बूटस्ट्रैप 3.3 के लिए यह एकमात्र कोड है जिसकी आपको आवश्यकता है:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Comments

पूरी तरह से काम नहीं करता है। इसे प्रदर्शित करने वाले मेनू आइटम ऊर्ध्वाधर नहीं हैं, लेकिन क्षैतिज हैं।

— 3

Answer 11

यह मेरे लिए Bootstrap3 का काम करता है

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

इन दोनों को निकालने के लिए कुछ समय लिया:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Comments

इसने मेरे लिए काम किया। एकमात्र अपवाद यह है कि आपके नमूने में न्यूनतम पिक्सेल चौड़ाई 1000px होनी चाहिए।

— साशा

Answer 12

आपका सबसे अच्छा दांव आपके द्वारा उपयोग किए जाने वाले CSS प्रोसेसर के पोर्ट का उपयोग करना होगा।

मैं SASS का बहुत बड़ा प्रशंसक हूं इसलिए मैं वर्तमान में https://github.com/thomas-mcdonald/bootstrap-sass का उपयोग करता हूं

ऐसा लगता है कि यहाँ स्टाइलस के लिए एक कांटा है: https://github.com/Acquisio/bootstrap-stylus

अन्यथा, खोज और बदलें सीएसएस संस्करण में आपका सबसे अच्छा दोस्त है ...

Comments

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

— नज़दीकी

Answer 13

नमस्ते, मुझे लगता है कि आप इसे CSS का उपयोग करके कर सकते हैं जैसे आप ब्रेकपॉइंट बूटस्ट्रैप मेनू को बदल सकते हैं

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Answer 14

नवबार उपयोग कर सकते हैं। nnavbar-toggler, .navbar-पतन, और .navbar-विस्तारित {{-sm | -md | -lg | -xl} वर्गों को बदलने के लिए जब उनकी सामग्री एक बटन के पीछे ढह जाती है। अन्य उपयोगिताओं के संयोजन में, आप विशेष तत्वों को दिखाने या छिपाने के लिए आसानी से चुन सकते हैं।

जो नावबार कभी नहीं गिरते हैं, उनके लिए नावबार पर -navbar- विस्तारित वर्ग जोड़ें। हमेशा गिरते रहने वाले नाविकों के लिए, कोई .navbar- विस्तारित वर्ग नहीं जोड़ें।

उदाहरण के लिए :

<nav class="navbar navbar-expand-lg"></nav>

मोबाइल मेनू बड़ी स्क्रीन में दिखाई दे रहा है।

संदर्भ: https://getbootstrap.com/docs/4.0/compenders/navbar/

Comments

हां, यह मेरे लिए ठीक वैसा ही काम करता है जैसा मुझे चाहिए था। बेशक, अगर आपको अधिक विशिष्ट ब्रेकपॉइंट की आवश्यकता है, तो अपनी स्वयं की मीडिया क्वेरी को कॉन्फ़िगर करना आवश्यक होगा (इसलिए इस प्रश्न का अनुकूल उत्तर)

— कोडरही

Answer 15

यह मेरे लिए क्या चाल है:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Comments

आपके समाधान के साथ और वीके द्वारा मैं पा रहा हूं कि 768 और 1000 के बीच मार्जिन का विस्तार, अनुचित रूप से। वे उन सीमाओं के बाहर ठीक हैं। आपके समाधान के साथ ध्वस्त मेनू के लिए आइकन भी ढहने के बाद दाईं ओर नहीं रहता है, लेकिन "ब्रांड" के खिलाफ दबाता है।

— माइक ओ'कॉनर

क्षमा करें, मैं स्पष्ट रूप से नासमझ हूं। मेरे पास अभी भी उन सीमाओं के अंदर अनुचित रूप से व्यापक मार्जिन की समस्या है। हालाँकि अब मैं देख रहा हूं कि एक आधिकारिक ऑनलाइन बूटस्ट्रैप उदाहरण मूल रूप से समान मार्जिन की समस्या को प्रदर्शित करता है।

— माइक ओ'कॉनर

Answer 16

बूटस्ट्रैप 4 में, यदि आप नावबार-विस्तार करते समय ओवर-राइड करना चाहते हैं- *, हैमबर्गर (नावबार-टॉगलर) को विस्तारित और दिखाता है और छुपाता है, तो आपको बूटस्ट्रैप में इस शैली / परिभाषा को खोजना होगा। और इसे अपने में फिर से परिभाषित करें। खुद के कस्टमस्टाइल.क्स (या अगर आप बहुत इच्छुक हैं तो सीधे bootstrap.css में)।

उदाहरण के लिए। मैं चाहता था कि नावबार-विस्तार-एलजी ढह जाए और 950px पर नावबार-टॉगलर दिखाए। बूटस्ट्रैप में। मुझे लगता है:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

और उसके नीचे ...

@media (min-width:992px) { 
    ... lots of styling ...
}

मैंने दोनों @मीडिया प्रश्नों की प्रतिलिपि बनाई और उन्हें अपनी शैली में चिपका दिया। फिर मेरी आवश्यकताओं को पूरा करने के लिए आकार को संशोधित किया। मेरा मामला मैं चाहता था कि यह 950px पर गिर जाए। @Media क्वेरीज़ को अलग-अलग साइज़ का होना चाहिए (मैं अनुमान लगा रहा हूं), इसलिए मैंने कंटेनर की अधिकतम चौड़ाई 949.98px पर सेट की और अन्य @media क्वेरी के लिए 950px का उपयोग किया और इसलिए निम्न कोड मेरे style.css में जोड़ा गया। यह स्टैकओवरफ़्लो और अन्य जगहों पर पाए गए मुड़ समाधानों से अलग करना आसान नहीं था। उम्मीद है की यह मदद करेगा।

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Answer 17

यहाँ बूटस्ट्रैप के साथ रिएक्ट में मेरा काम करने वाला कोड

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Answer 18

अब यह बूटस्ट्रैप 4.4 पर समर्थित है

navbar-expand-sm 

Comments

हाँ सही है, लेकिन आपको बड़े स्क्रीन पर

— नेवी को गिराने के लिए नावबार