बूटस्ट्रैप 3 - नावबार पतन को अक्षम करें

Question

यह मेरा सरल नवाब है:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

मैं इसे रोकने के लिए इसे रोकना चाहूंगा, क्योंकि मुझे इसकी आवश्यकता नहीं है, कैसे करें?

मैं डिफ़ॉल्ट शैलियों को ओवरराइड करने के लिए CSS की 300K लाइनें लिखने से बचना चाहूंगा।

कोई उपाय?

Answer 1

नज़दीकी परीक्षा के बाद, 300k लाइनें नहीं, लेकिन लगभग 3-4 सीएसएस गुण हैं जिन्हें आपको ओवरराइड करने की आवश्यकता है:

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

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

और इसके साथ ही आपका मेनू ध्वस्त नहीं होगा।

DEMO ( jsfiddle )

व्याख्या

चार सीएसएस गुण संबंधित करते हैं:

1. .collapseबूटस्ट्रैप में डिफ़ॉल्ट संपत्ति टेबलेट (लैंडस्केप) और फोन के लिए मेनू के दाईं ओर छुपाती है और इसके बजाय इसे छिपाने / दिखाने के लिए टॉगल बटन प्रदर्शित किया जाता है। इस प्रकार यह संपत्ति डिफ़ॉल्ट को ओवरराइड करती है और उन तत्वों को लगातार दिखाती है।

2. दाईं ओर के मेनू के लिए बाईं ओर के साथ एक ही पंक्ति में दिखाई देने के लिए, हमें बाईं ओर बाईं ओर तैरने की आवश्यकता है।

3. यह प्रॉपर्टी बूटस्ट्रैप में डिफ़ॉल्ट रूप से मौजूद है लेकिन फोन रिज़ॉल्यूशन के लिए टैबलेट (पोर्ट्रेट) पर नहीं। आप इसे छोड़ सकते हैं, यह आपके समग्र नावबार को प्रभावित नहीं करने की संभावना है।

4. यह दाईं ओर के मेनू को दाईं ओर रखता है जबकि आंतरिक तत्व ( li) संपत्ति 2 का अनुसरण करेंगे। इसलिए हमारे पास बाईं ओर फ्लोट बाईं ओर और दाईं ओर फ्लोट दाईं ओर है जो उन्हें एक पंक्ति में लाता है।

Comments

@gwho ने उत्तर के लिए एक स्पष्टीकरण जोड़ा।

— अयूब

यदि यह पर्याप्त रूप से पतला हो जाता है, तो फ्लोट किए गए बाएं और फ्लोट किए गए सही तत्व एक-दूसरे पर लपेट सकते हैं (आईएम ulएस के बारे में बात कर रहे हैं li)। क्या ऐसा होने से रोकने के लिए सबसे अच्छा तरीका है?

— एहनबिजद

यदि आपकी एकमात्र आवश्यकता UL / LI सूची को लंबवत बनने से रोकना है, तो दूसरी CSS की आवश्यकता है।

— जेम्सबी

यहाँ !importantबयान आवश्यक नहीं हैं, मेरे लिए यह बिना काम करता है। जब भी संभव हो उनसे बचने की कोशिश करें (महत्वपूर्ण!)।

— टिम-इरविन

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

— रौबी

Answer 2

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

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

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

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

 @grid-float-breakpoint

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

---

SAAS उपयोगकर्ताओं के लिए

$grid-float-breakpoint: 0px;से पहले की तरह अपने कस्टम चर जोड़ें@import "bootstrap.scss";

Comments

यह वास्तव में उपयोगी है दुर्भाग्य से मैं बूटस्ट्रैप सीडीएन का उपयोग कर रहा हूं इसलिए मैं बूटस्ट्रैप मुख्य फ़ाइल को अनुकूलित करने में असमर्थ हूं, किसी अलग सीएसएस फ़ाइल में यह कैसे करें?

— मेमो

+1, बूटस्ट्रैप कस्टमाइज़ेशन पेज पर @ ग्रिड-फ्लोट-ब्रेकपॉइंट-वैरिएबल के लिए, जिसने मेरे लिए चाल चली!

— Wietse

SASS उपयोगकर्ताओं के लिए: बस लाइन $grid-float-breakpoint: 0px;से पहले अपने कस्टम चर जैसे जोड़ें@import "bootstrap.scss";

— Duvrai

Answer 3

यहां एक ऐसा दृष्टिकोण है जो डिफ़ॉल्ट पतन व्यवहार को अपरिवर्तित छोड़ देता है जबकि नेविगेशन के एक नए अनुभाग को हमेशा दृश्यमान रहने की अनुमति देता है। इसकी वृद्धि navbar;navbar-header-menuएक सीएसएस वर्ग है जिसे मैंने बनाया है और बूटस्ट्रैप का हिस्सा उचित नहीं है।

इसे navbar-headerतत्व में रखें navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

इस सीएसएस जोड़ें:

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

फिडेल की जाँच करें: http://jsfiddle.net/L2txunqo/

कैविएट: navbar-rightतत्वों को नेत्रहीन रूप से सॉर्ट करने के लिए उपयोग किया जा सकता है, लेकिन स्क्रीन के सबसे दाहिने हिस्से में तत्व को खींचने की गारंटी नहीं है। फिडेल के साथ उस व्यवहार को दर्शाता है navbar-form।

Answer 4

यदि आप कम संस्करण का उपयोग नहीं कर रहे हैं, तो यहां वह पंक्ति है जिसे आपको बदलने की आवश्यकता है:

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

Answer 5

निम्नलिखित समाधान ने बूटस्ट्रैप 3.3.4 में मेरे लिए काम किया:

सीएसएस:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

फिर प्रत्येक सूची में .no- पतन वर्ग और .off वर्ग को मुख्य कंटेनर में जोड़ें। यहाँ एक उदाहरण जेड में लिखा गया है:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout

Answer 6

एक और तरीका है कि बस collapse navbar-collapseमार्कअप से हटा दें । बूटस्ट्रैप 3.3.7 के साथ उदाहरण

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>