Bootstrap css menyembunyikan sebagian container di bawah navbar navbar-fixed-top

127

Saya sedang membangun sebuah proyek dengan Bootstrap dan saya menghadapi masalah kecil. Saya memiliki wadah di bawah Nav-top. Masalah saya adalah bahwa beberapa bagian dari wadah saya tersembunyi di bawah header nav-top. Saya tidak ingin menggunakan margin atas dengan wadah. Tolong lihat di bawah html di mana saya menghadapi masalah ini

<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 Ajay Beniwal
sumber
Dari dokumen bootstrap: Diperbaiki ke atas Tambahkan .navbar-fixed-top dan ingat untuk memperhitungkan area tersembunyi di bawahnya dengan menambahkan setidaknya pengisi 40px ke <body>. Pastikan untuk menambahkan ini setelah CSS Bootstrap inti dan sebelum CSS responsif opsional.
cms_mgr

Jawaban:

215

Ini ditangani dengan menambahkan beberapa paddingke bagian atas <body>.

Sesuai dokumentasi Bootstrap di.navbar-fixed-top , coba nilai Anda sendiri atau gunakan cuplikan kami di bawah ini. Tip: Secara default, navbaradalah 50pxtinggi.

  body {
    padding-top: 70px;
  }

Juga, lihat sumber untuk contoh ini dan buka starter-template.css.

Peter
sumber
1
saya menambahkan padding 60px antara css responsif dan css normal dan berfungsi dengan baik
Ajay Beniwal
1
Masalahnya adalah .. jika saya menyesuaikan bootstrap melalui tautan kustomisasi .. maka saya tidak mendapatkan css responsif secara terpisah ... jadi tidak ada cara untuk menyediakan "di antara" kedua deklarasi tersebut. Juga saran tambahkan-beberapa-tag-antara-saya-normal-dan-responsif-css ini .. sepertinya agak hackish. Bukan? Harus ada solusi yang lebih baik dari ini.
VJ.
Jika Anda menggunakan LESS, gunakan variabel bootstrap @ navbar-height untuk menemukan tinggi navbar.
yankee
3
Ini lebih merupakan solusi daripada solusi: Meskipun ini membantu dengan bagian atas halaman, jangkar dan semacamnya masih tidak berfungsi. Jika Anda menggulir ke subbagian menggunakan jangkar, judul subbagian akan berada di belakang bilah navigasi.
mastov
1
Mengapa ini mulai terjadi, apakah ada yang tahu? itu baru saja mulai terjadi pada saya yang terasa entah dari mana dan saya masih tidak dapat menemukan sumber dari apa yang menghancurkannya.
Taylor Brown
37

Saya kira masalah yang Anda miliki terkait dengan ketinggian dinamis yang dimiliki navbar tetap di bagian atas. Misalnya, saat pengguna masuk, Anda perlu menampilkan semacam " Halo [Nama Pengguna] " dan bila namanya terlalu lebar, bilah navigasi perlu menggunakan lebih banyak tinggi agar teks ini tidak tumpang tindih dengan menu bilah navigasi . Karena bilah navigasi memiliki gaya " posisi: tetap ", badan tetap di bawahnya dan bagian yang lebih tinggi menjadi tersembunyi sehingga Anda perlu "secara dinamis" mengubah bantalan di bagian atas setiap kali ketinggian bilah navigasi berubah yang akan terjadi berikut ini skenario kasus:

  1. Halaman dimuat / dimuat ulang.
  2. Jendela browser diubah ukurannya karena ini dapat mencapai breakpoint responsif yang berbeda.
  3. The navbar konten yang diubah secara langsung atau tidak langsung karena hal ini dapat memicu perubahan tinggi.

Dinamika ini tidak tercakup oleh CSS biasa jadi saya hanya dapat memikirkan satu cara untuk menyelesaikan masalah ini jika pengguna mengaktifkan JavaScript . Silakan coba potongan kode jQuery berikut untuk menyelesaikan skenario kasus 1 dan 2; untuk skenario kasus 3, harap ingat untuk memanggil fungsi onResize () setelah ada perubahan dalam konten 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>
Luaskan cuplikan

LuckyBrain
sumber
Inilah yang saya cari. Dioptimalkan dengan menyimpan lebar jendela dan memeriksa apakah hanya perubahan ukuran vertikal yang berubah.
Ripside
20

Cukup tentukan navbar kosong sebelum yang diperbaiki, itu akan menciptakan ruang yang dibutuhkan.

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
Minggir
sumber
8
Ini cara yang buruk dalam melakukan sesuatu.
DotSlashCoding
Tutup, tetapi tidak memperhitungkan pembungkusan item di bilah navigasi asli - kecuali Anda menduplikasi semua menu di sana.
Ripside
Setuju dengan @DotSlashCoding, pendekatan ini bukan praktik pengkodean yang baik (gagal dalam uji pemeliharaan karena alasan yang tidak tepat). Tidak jelas langsung apa yang ekstra ini navbarlakukan.
fragilewindows
Pragmatis dan keren. Saya juga berpikir bahwa semua solusi untuk masalah ini buruk.
de.
8

Itu terjadi karena dengan navbar-fixed-topkelas navbar mendapatkan position:fixed. Ini secara bergantian mengeluarkan bilah navigasi dari aliran dokumen meninggalkan isi untuk mengambil ruang di belakang bilah navigasi.

Anda perlu menerapkan padding-topatau margin-topuntuk Anda container, berdasarkan kebutuhan Anda dengan nilai-nilai>= 50px . (atau bermain-main dengan nilai yang berbeda)

Navbar bootstrap dasar membutuhkan ketinggian 40px. Jadi, jika Anda memberikan satu padding-topatau margin-topdari 50px atau lebih, Anda akan selalu memiliki ruang bernapas antara wadah Anda dan bilah navigasi.

Praveen Puglia
sumber
6

Saya juga mengalami masalah ini tetapi menyelesaikannya tanpa skrip dan hanya menggunakan CSS. Saya mulai dengan mengikuti padding-top yang direkomendasikan untuk menu tetap dengan pengaturan 60px yang dijelaskan di situs web Bootstrap. Kemudian saya menambahkan tiga tag media yang mengubah ukuran padding pada titik potong di mana menu saya juga berubah ukuran.

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

Satu catatan, ketika lebar menu saya antara 768 dan 991, logo menu di layout saya ditambah <li> opsi menyebabkan menu membungkus menjadi dua baris. Oleh karena itu, saya harus menyesuaikan padding-top untuk mencegah menu menutupi konten, maka 110px.

Semoga ini membantu...

Harvey Mushman
sumber
6

Saya tahu utas ini sudah tua, tetapi saya baru saja masuk ke masalah itu dan saya memperbaikinya dengan hanya menggunakan page-headerkelas di halaman saya, di bawah nav. Juga saya menggunakan <nav>tag, bukan <div>tetapi saya tidak yakin itu akan menampilkan perilaku yang berbeda.

Menggunakan page-headersebagai wadah untuk halaman, Anda tidak perlu mengotak-atik <body>, hanya jika Anda tidak setuju dengan ruang default yang page-headerdiberikan.

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

Zorkind
sumber
3

saya menyelesaikannya menggunakan jquery

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

CruzDelSur
sumber