w3schools - বুটস্ট্র্যাপ CSS CSS Navbar-fixed-top এর নিচে ধারক অংশ লুকিয়ে রাখে




w3schools bootstrap 4 (5)

আমি বুটস্ট্র্যাপের সাথে একটি প্রকল্প তৈরি করছি এবং আমি সামান্য সমস্যার মুখোমুখি। আমার Nav -top এর নিচে একটি ধারক আছে। আমার ইস্যুটি যে আমার কন্টেইনারের কিছু অংশ ন্যাভি-শীর্ষ শিরোনামের নীচে লুকানো আছে। আমি শীর্ষ-মার্জিন ব্যবহার করতে চাই না ধারক। প্ল্যাটফর্ম নীচের HTML দেখতে যা আমি সম্মুখীন সম্মুখীন

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

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

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


আমি এই থ্রেড পুরানো জানি, কিন্তু আমি ঠিক যে সমস্যা মধ্যে পেয়েছিলাম এবং আমি শুধু ন্যাভিগেশন অধীনে, আমার পৃষ্ঠায় পাতা page-header বর্গ ব্যবহার করে এটি সংশোধন করা হয়েছে। এছাড়াও আমি <div> পরিবর্তে <nav> ট্যাগটি ব্যবহার করেছি কিন্তু আমি নিশ্চিত নই যে এটি কোনো ভিন্ন আচরণ উপস্থাপন করবে।

page-header হিসাবে 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>


আমিও এই সমস্যাটি করেছি কিন্তু স্ক্রিপ্ট ছাড়াই এটি সমাধান করেছি এবং শুধুমাত্র সিএসএস ব্যবহার করে। আমি বুটস্ট্র্যাপ ওয়েবসাইটে বর্ণিত 60 পিএক্স সেট করে একটি নির্দিষ্ট মেনুর জন্য প্রস্তাবিত প্যাডিং-শীর্ষ অনুসরণ করে শুরু করি। তারপর আমি তিনটি মিডিয়া ট্যাগ যোগ করেছিলাম যা আমার মেনু পুনরায় আকারে কাটঅফ পয়েন্টগুলিতে প্যাডিংকে পুনরায় আকার দেয়।

<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।

আশাকরি এটা সাহায্য করবে...


এই <body> উপরের কিছু padding যোগ করে পরিচালনা করা হয়।

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

  body {
    padding-top: 70px;
  }

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


ঠিক পূর্বের একটি খালি নেভিবারটি সংজ্ঞায়িত করুন, এটি প্রয়োজনীয় স্থান তৈরি করবে।

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>




twitter-bootstrap