বুটস্ট্র্যাপ সিএসএস নভবার নাভবার-ফিক্সড-শীর্ষের নীচে ধারকটির অংশ লুকায়

127

আমি বুটস্ট্র্যাপ নিয়ে একটি প্রকল্প তৈরি করছি এবং আমি সামান্য সমস্যার মুখোমুখি হচ্ছি I আমার কাছে ন্যাভ-ট্যাপের নীচে একটি ধারক রয়েছে y আমার সমস্যাটি হ'ল আমার ধারকটির কিছু অংশ নেভ-শীর্ষের শিরোনামের নীচে লুকানো আছে I ধারক। দয়া করে নীচে এইচটিএমএল দেখুন যা আমি সমস্যার মুখোমুখি হয়েছি

<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

— অজয় বেনিওয়াল
সূত্র

বুটস্ট্র্যাপ ডক্স থেকে: ফিক্সড টু টু অ্যাড। নবর-ফিক্সড-টপ যুক্ত করুন এবং <body> তে কমপক্ষে 40px প্যাডিং যুক্ত করে এর নীচে লুকানো জায়গার জন্য অ্যাকাউন্টটি মনে রাখবেন। মূল বুটস্ট্র্যাপ সিএসএসের পরে এবং responsiveচ্ছিক প্রতিক্রিয়াশীল সিএসএসের আগে এটি যুক্ত করার বিষয়ে নিশ্চিত হন।

— cms_mgr

215

এটি paddingশীর্ষে কিছু যুক্ত করে পরিচালনা করা হয় <body>।

অনুযায়ী উপর বুটস্ট্র্যাপ এর ডকুমেন্টেশন.navbar-fixed-top , আপনার নিজের মান আউট চেষ্টা করুন বা নীচে আমাদের স্নিপেট ব্যবহার করুন। টিপ: ডিফল্টরূপে, navbarহয় 50pxউচ্চ।

  body {
    padding-top: 70px;
  }

এছাড়াও, এই উদাহরণের উত্সটি একবার দেখুন এবং খুলুন starter-template.css।

— পিটার
সূত্র

1

আমি প্রতিক্রিয়াশীল CSS এবং সাধারণ CSS এর মধ্যে 60px প্যাডিং যুক্ত করেছি এবং এটি দুর্দান্ত কাজ করেছে

— অজয় বেনিওয়াল

1

সমস্যাটি হল .. আমি যদি কাস্টমাইজ লিংকের মাধ্যমে বুটস্ট্র্যাপটি কাস্টমাইজ করি .. তবে আমি আলাদাভাবে প্রতিক্রিয়াশীল সিএসএস পাই না ... সুতরাং এই দুটি ঘোষণার মধ্যে "সরবরাহ করার" উপায় নেই। এছাড়াও আমার-সাধারণ-এবং-প্রতিক্রিয়াশীল-সিএসএস পরামর্শের মধ্যে এই-কিছু-ট্যাগ-যোগ .. কিছুটা হ্যাকিশ মনে হচ্ছে। তাই না? এর চেয়ে আরও ভাল সমাধান হতে হবে।

— ভিজে

আপনি যদি কম ব্যবহার করেন তবে নববারের উচ্চতা জানতে বুটস্ট্র্যাপ ভেরিয়েবল @ নভবার-উচ্চতা ব্যবহার করুন।

— ইয়াঙ্কি

3

এটি একটি সমাধানের চেয়ে কাজের ক্ষেত্রের আরও বেশি: যদিও এটি পৃষ্ঠার শীর্ষের সাথে সহায়তা করে, অ্যাঙ্করগুলি এবং এগুলি এখনও কাজ করে না। যদি আপনি অ্যাঙ্করগুলি ব্যবহার করে কোনও উপচ্ছেদে স্ক্রোল করেন তবে সাবকিশনটির শিরোনাম নেভিগেশন বারের পিছনে থাকবে।

— mastov

1

কেন এমনটা শুরু হতে শুরু করে কেউ জানেন? এটি কেবল আমার সাথে ঘটেছিল যা অনুভূত হয় নি যে কোথাও থেকে বেরিয়ে এসেছিল এবং আমি এখনও এটিটি কীভাবে শুরু করে তা ভেঙে যাওয়ার উত্স খুঁজে পাই না।

— টেলর ব্রাউন

37

আমি অনুমান করি যে সমস্যাটি আপনার উপরের স্থির নববারের গতিশীল উচ্চতার সাথে সম্পর্কিত । উদাহরণস্বরূপ, যখন কোনও ব্যবহারকারী লগ ইন করে, আপনাকে কিছু ধরণের " হ্যালো [ব্যবহারকারীর নাম] প্রদর্শন করতে হবে " এবং যখন নামটি খুব প্রশস্ত হয়, নাবারকে আরও উচ্চতা ব্যবহার করা প্রয়োজন যাতে এই পাঠ্যটি নাবারবার মেনুতে ওভারল্যাপ না হয় । যেহেতু ন্যাবারটিতে " অবস্থান: স্থির " শৈলী রয়েছে , দেহ তার নীচে থেকে যায় এবং এর একটি দীর্ঘ অংশ লুকিয়ে যায় তাই আপনাকে বারবার নাবারের উচ্চতা পরিবর্তনের সময় শীর্ষে প্যাডিং পরিবর্তন করতে হবে যা নিম্নলিখিত ক্ষেত্রে ঘটবে কেস পরিস্থিতি:

পৃষ্ঠাটি লোড / পুনরায় লোড করা হয়েছে।
ব্রাউজার উইন্ডোটিকে পুনরায় আকার দেওয়া হয়েছে কারণ এটি কোনও ভিন্ন প্রতিক্রিয়াশীল ব্রেকপয়েন্টে আঘাত করতে পারে।
দ্য NavBar কন্টেন্ট এই যেমন প্রত্যক্ষ বা পরোক্ষভাবে রুপান্তরিত করা হয়েছে উচ্চতা পরিবর্তন ঘটান পারে।

এই গতিশীলতাটি নিয়মিত সিএসএস দ্বারা আচ্ছাদিত নয় সুতরাং আমি যদি ব্যবহারকারী জাভাস্ক্রিপ্ট সক্ষম করে থাকি তবে এই সমস্যাটি সমাধান করার জন্য কেবলমাত্র একটি উপায় সম্পর্কে ভাবতে পারি । কেস পরিস্থিতি 1 এবং 2 সমাধান করার জন্য দয়া করে নীচের jQuery কোড স্নিপেট ব্যবহার করে দেখুন; কেস দৃশ্যকল্প জন্য 3 ফাংশন কল দয়া করে মনে রাখবেন () onResize কোন পরিবর্তন পর NavBar বিষয়বস্তু:

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>

— move.over
সূত্র

8

এটি জিনিসগুলি করার একটি বাজে উপায়।

— ডটস্ল্যাশ কোডিং

বন্ধ করুন, কিন্তু আসল নাবারে আইটেম মোড়ানোর জন্য অ্যাকাউন্ট করে না - যদি আপনি সেখানে সমস্ত মেনু নকল না করেন।

— রিপসাইড

@ ডটস্ল্যাশকোডিংয়ের সাথে সম্মত হন, এই পদ্ধতিটি ভাল কোডিং অনুশীলন নয় (কোনও কারণ ছাড়াই রক্ষণাবেক্ষণের পরীক্ষায় ব্যর্থ হয়)। এই অতিরিক্ত কী করে তা এখনই পরিষ্কার নয় navbar।

— ভঙ্গুর উইন্ডোজ

বাস্তববাদী এবং দুর্দান্ত। আমি আরও মনে করি যে এই সমস্যাটির সমস্ত সমাধান অদ্ভুত।

— ডি।

8

এটি ঘটে কারণ navbar-fixed-topশ্রেণীর সাথে নাবারটি পায় position:fixed। এর ফলে ন্যাবারকে নথির প্রবাহের বাইরে নিয়ে যায়, দেহটি পেছনের স্থান নিতে নাভবারের ।

মানগুলির সাথে আপনার প্রয়োজনীয়তার উপর ভিত্তি করে আপনাকে আবেদন করতে হবে padding-topবা margin-topআপনার প্রয়োগ containerকরতে হবে>= 50px । (বা বিভিন্ন মান সহ চারপাশে খেলুন)

বেসিক বুটস্ট্র্যাপ নাবারটি চারপাশে উচ্চতা নেয় 40px। তাই আপনি যদি কিছু তোমাদের দান করেছি padding-topবা margin-topএর 50px বা তার বেশি, সবসময় আপনার মধ্যে যে অবকাশ থাকবে ধারক এবং NavBar।

— প্রবীণ পুগলিয়া
সূত্র

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> বিকল্পগুলি মেনুটিকে দুটি লাইনে মোড়ানোর কারণ করে। অতএব, মেনুটি সামগ্রীটি coveringেকে রাখতে বাধা দেওয়ার জন্য আমাকে প্যাডিং-টপ সামঞ্জস্য করতে হয়েছে, সুতরাং 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
সূত্র

3

আমি jquery ব্যবহার করে এটি সমাধান

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>

স্নিপেট প্রসারিত করুন

— CruzDelSur
সূত্র