twitter bootstrap - bootstrap - টুইটার বুটস্ট্র্যাপ-পৃষ্ঠার শীর্ষ সামগ্রী ব্লক করা শীর্ষ নেভি বার



bootstrap templates (12)

আমার এই টুইটার বুটস্ট্র্যাপ কোড আছে

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

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

https://src-bin.com


Answer #1

আপনার জেএস যোগ করুন:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

Answer #2

আপনার রেফারেন্সের জন্য আরও অনেক সহজ সমাধান, এটি আমার সমস্ত প্রকল্পগুলিতে নিখুঁত কাজ করে:

থেকে আপনার প্রথম 'div' পরিবর্তন

<div class='navbar navbar-fixed-top'>

থেকে

<div class="navbar navbar-default navbar-static-top">

Answer #3

আপনি পর্দা রেজল্যুশন উপর ভিত্তি করে মার্জিন সেট করতে পারেন

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}

Answer #4

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

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Answer #5

আমি আমার বাস্তব নির্দিষ্ট নেভি বারের ঠিক আগে একটি ডামি অ-নির্দিষ্ট এনভি বার তৈরি করার সাথে ভাল সাফল্য পেয়েছি।

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

স্পেস সব পর্দা মাপের উপর মহান কাজ করে।


Answer #6

আমি এই সমস্যা সমাধানের জন্য jQuery ব্যবহার করছি। এটি BS 3.0.0 এর জন্য স্নিপেট:

$(window).resize(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);        
});

Answer #7

এমভিসি 5 ব্যবহার করে, যেভাবে আমি আমার সংশোধন করেছি, কেবল আমার নিজের সাইট.css যোগ করতে হবে, লোকেদের পরে লোড করা নিম্নলিখিত লাইন দিয়ে: body{padding: 0}

এবং আমি _Layout.cshtml এর শুরুতে কোডটি পরিবর্তন করেছি:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

Answer #8

টুইটার থেকে এই উদাহরণে দেখানো হিসাবে, প্রতিক্রিয়াশীল শৈলী ঘোষণা অন্তর্ভুক্ত লাইন আগে এটি যোগ করুন:

<style> 
    body {
        padding-top: 60px;
    }
</style>

তাই ভালো:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />


Answer #10

এমভিসি 5 টিউটোরিয়াল থেকে প্রাপ্ত আমার প্রোজেক্টে আমি দেখলাম যে শরীরের প্যাডিং পরিবর্তন করা কোন প্রভাব ফেলেনি। নিম্নলিখিত আমার জন্য কাজ করেছেন:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

এটি সেই ক্ষেত্রে সমাধান করে যেখানে navbar 2 বা 3 লাইনের মধ্যে ভাঁজ করে। এই লাইন শরীরের পরে কোথাও bootstrap.css মধ্যে সন্নিবেশ করা যেতে পারে {মার্জিন: 0; }


Answer #11

Navbar navbar- ডিফল্ট সবকিছুই সূক্ষ্ম কাজ করে, তবে আপনি যদি নেভিবার-ফিক্সড-শীর্ষ ব্যবহার করেন তবে আপনাকে কাস্টম স্টাইল শরীরটি {প্যাডিং-শীর্ষ: 60 পিএক্স;} অন্তর্ভুক্ত করতে হবে নাহলে এটি নীচে সামগ্রী অবরোধ করবে।


Answer #12
<div class='navbar' data-spy="affix" data-offset-top="0">

যদি আপনার ন্যাবার মূল পৃষ্ঠার শীর্ষে থাকে তবে মানটি 0 এ সেট করুন। অন্যথা, আপনার নেভিবারের উপরে থাকা সামগ্রীটির মান থেকে data-offset-top মানটি সেট করুন।

এদিকে, আপনি css যেমন পরিবর্তন করতে হবে:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}




twitter-bootstrap