बूटस्ट्रैप सीएसएस कंटेनर के हिस्से को नेबर नेबर-फिक्स्ड-टॉप के नीचे छिपा देता है

127

मैं बूटस्ट्रैप के साथ एक परियोजना का निर्माण कर रहा हूं और छोटे मुद्दे का सामना कर रहा हूं। मेरे पास Nav-top के नीचे एक कंटेनर है। मेरा मुद्दा यह है कि मेरे कंटेनर का कुछ हिस्सा नौसेना-शीर्ष हैडर के नीचे छिपा हुआ है। मैं शीर्ष-मार्जिन का उपयोग नहीं करना चाहता हूं कंटेनर। Pls नीचे HTML देखें जिसमें im समस्या का सामना कर रहा है

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>
css  twitter-bootstrap 
— अजय बेनीवाल
स्रोत
बूटस्ट्रैप डॉक्स से: .navbar-fixed-top को जोड़ने के लिए निश्चित किया गया है और <body> में कम से कम 40px पैडिंग जोड़कर इसके नीचे छिपे हुए क्षेत्र का हिसाब रखना याद रखें। कोर बूटस्ट्रैप सीएसएस के बाद और वैकल्पिक उत्तरदायी सीएसएस से पहले इसे जोड़ना सुनिश्चित करें।
— cms_mgr

जवाबों:

215

इसे paddingऊपर से कुछ जोड़कर नियंत्रित किया जाता है<body> ।

बूटस्ट्रैप के प्रलेखन के.navbar-fixed-top अनुसार , अपने स्वयं के मूल्यों को आज़माएं या नीचे हमारे स्निपेट का उपयोग करें। युक्ति: डिफ़ॉल्ट रूप से, navbarहै 50pxउच्च।

  body {
    padding-top: 70px;
  }

इसके अलावा, इस उदाहरण के लिए स्रोत पर एक नज़र डालें और खोलें starter-template.css।

— पीटर
स्रोत
1
मैंने उत्तरदायी सीएसएस और सामान्य सीएसएस के बीच 60px पैडिंग जोड़ी और यह ठीक काम किया
— अजय बेनीवाल
1
मुद्दा यह है .. अगर मैं बूटस्ट्रैप को कस्टमाइज़ लिंक के माध्यम से अनुकूलित करता हूं .. तो मुझे अलग से उत्तरदायी सीएसएस नहीं मिलता है ... इसलिए दो घोषणाओं के बीच "यह" प्रदान करने का कोई तरीका नहीं है। इसके अलावा यह कुछ-टैग-के बीच-मेरी-सामान्य-और-उत्तरदायी-सीएसएस सलाह .. हैकिश का थोड़ा सा लगता है। यह नहीं है? इससे बेहतर उपाय करना होगा।
— वीजे
यदि आप LESS का उपयोग कर रहे हैं, तो navbar height खोजने के लिए बूटस्ट्रैप वैरिएबल @ navbar-height का उपयोग करें।
— yankee
3
यह एक समाधान की तुलना में काम के आसपास अधिक है: जबकि यह पृष्ठ के शीर्ष, एंकर और ऐसे अभी भी काम नहीं करता है। यदि आप एंकर का उपयोग करके एक उपधारा में स्क्रॉल करते हैं, तो उपधारा का शीर्षक नेविगेशन बार के पीछे होगा।
— मस्तोव
1
ऐसा क्यों होना शुरू होता है किसी को पता नहीं है? यह सिर्फ मेरे साथ होने लगा जो मुझे कहीं से भी महसूस होने लगा था और मुझे अभी भी इसके स्रोत का पता नहीं चल पाया है, जिसे शुरू करने के लिए इसे तोड़ दिया।
— टेलर ब्राउन
37

मुझे लगता है कि आपके पास जो समस्या है वह गतिशील ऊंचाई से संबंधित है जो शीर्ष पर तय की गई नावबार है। उदाहरण के लिए, जब कोई उपयोगकर्ता लॉग इन करता है, तो आपको किसी तरह का " हेलो [यूजर नेम] " प्रदर्शित करना होगा और जब नाम बहुत चौड़ा हो, तो नावबार को अधिक ऊंचाई का उपयोग करने की आवश्यकता होती है इसलिए यह टेक्स्ट नेवबर मेनू के साथ ओवरलैप नहीं होता है । के रूप में नेवबार शैली "है स्थिति: तय ", इसे नीचे शरीर रहता है और इसके बारे में एक लम्बे हिस्सा पीछे छिप जाता है, ताकि आप की जरूरत है "गतिशील" पैडिंग शीर्ष पर हर बार बदल नेवबार ऊंचाई परिवर्तन जो निम्नलिखित में क्या होगा मामले के परिदृश्य:

  1. पृष्ठ लोड / पुनः लोड किया गया है।
  2. ब्राउज़र विंडो को आकार दिया जाता है क्योंकि यह एक अलग उत्तरदायी ब्रेकपॉइंट मार सकता है।
  3. नेवबार सामग्री के रूप में प्रत्यक्ष या परोक्ष रूप संशोधित किया गया है एक ऊंचाई परिवर्तन भड़काने सकता है।

यह गतिशीलता नियमित सीएसएस द्वारा कवर नहीं की जाती है, इसलिए मैं केवल इस समस्या को हल करने का एक तरीका सोच सकता हूं यदि उपयोगकर्ता ने जावास्क्रिप्ट सक्षम किया है। कृपया केस परिदृश्य 1 और 2 को हल करने के लिए निम्नलिखित jQuery कोड स्निपेट आज़माएं ; स्थिति के लिए 3 समारोह कॉल करने के लिए कृपया याद रखें () onResize में कोई बदलाव के बाद नेवबार सामग्री:

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
स्निपेट का विस्तार करें

— LuckyBrain
स्रोत
यह वही है जिसे मैं देख रहा था। खिड़की की चौड़ाई को स्टोर करके इसे ऑप्टिमाइज़ किया जाता है और जाँच की जाती है कि क्या केवल ऊर्ध्वाधर आकार बदल गया है।
— रिप्साइड
20

बस एक तयशुदा से पहले एक खाली नावबार को परिभाषित करें, यह आवश्यक स्थान बनाएगा।

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
— खिसकना
स्रोत
8
यह चीजों को करने का एक गंदा तरीका है।
— DotSlashCoding
बंद करें, लेकिन असली नावबार में आइटम लपेटने के लिए कोई खाता नहीं है - जब तक कि आप वहां के सभी मेनू की नकल न करें।
— रिप्साइड
@DotSlashCoding से सहमत हैं, यह दृष्टिकोण अच्छा कोडिंग अभ्यास नहीं है (बिना किसी अच्छे कारण के स्थिरता बनाए रखने में विफल रहता है)। यह अभी स्पष्ट नहीं है कि यह अतिरिक्त क्या navbarकरता है।
— 13
व्यावहारिक और शांत। मुझे यह भी लगता है कि इस मुद्दे के सभी समाधान गंदे हैं।
— डे।
8

ऐसा इसलिए होता है क्योंकि navbar-fixed-topकक्षा के साथ नवबार मिलता है position:fixed। यह बदले में नेवबार को दस्तावेज़ प्रवाह से बाहर ले जाता है और शरीर को छोड़ कर नेवबार के पीछे की जगह लेता है ।

आपको मूल्यों के साथ अपनी आवश्यकताओं के आधार पर padding-topया margin-topआपके लिए आवेदन करने की containerआवश्यकता है >= 50px। (या विभिन्न मूल्यों के साथ खेलते हैं)

बुनियादी बूटस्ट्रैप नेबार चारों ओर ऊंचाई लेता है 40px। इसलिए यदि आप एक padding-topया एक margin-topसे 50px अधिक देते हैं, तो आपके पास हमेशा आपके कंटेनर और नावबार के बीच में श्वास स्थान होगा ।

— प्रवीण पुगलिया
स्रोत
6

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

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

एक नोट, जब मेरे मेनू की चौड़ाई 768 और 991 के बीच है, तो मेरे लेआउट में मेनू लोगो प्लस <li> विकल्प दो मेनू को लपेटने का कारण बनता है। इसलिए, मुझे मेनू को सामग्री को कवर करने से रोकने के लिए पैडिंग-टॉप को समायोजित करना पड़ा, इसलिए 110px।

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

— हार्वे मुश्मान
स्रोत
6

मुझे पता है कि यह धागा पुराना है, लेकिन मैं बस उस समस्या में शामिल हो गया और मैंने इसे page-headerअपने पेज में, नौसेना के तहत कक्षा का उपयोग करके इसे ठीक किया । इसके अलावा मैंने इसके <nav>बजाय टैग का इस्तेमाल किया <div>लेकिन मुझे यकीन नहीं है कि यह कोई अलग व्यवहार पेश करेगा।

page-headerपृष्ठ के लिए एक कंटेनर के रूप में उपयोग करने पर , आपको इसके साथ गड़बड़ करने की आवश्यकता नहीं होगी <body>, केवल यदि आप डिफ़ॉल्ट स्थान से असहमत हैं page-headerजो आपको देता है।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>
स्निपेट का विस्तार करें

— Zorkind
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.