Bootstrap css, kapsayıcının navbar navbar-fixed-top altındaki kısmını gizler

127

Bootstrap ile bir proje oluşturuyorum ve küçük bir sorunla karşı karşıyayım. Nav -top'un altında bir konteynerim var. Benim sorunum, konteynerimin bir kısmının nav-top başlığının altına gizlenmiş olması. bir kap. Pls, sorunla karşılaştığım html'ye bakın

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

Önyükleme belgelerinden: Üste sabitlendi .navbar-fixed-top ekleyin ve <body> öğesine en az 40px dolgu ekleyerek altındaki gizli alanı hesaba katmayı unutmayın. Bunu temel Bootstrap CSS'sinden sonra ve isteğe bağlı duyarlı CSS'den önce eklediğinizden emin olun.

— cms_mgr

215

Bu, bazı eklenerek işlenir paddingüstüne <body>.

Gereğince ilgili Bootstrap belgelerine.navbar-fixed-top , kendi değerleriyle denemeler veya aşağıdaki pasajı kullanın. İpucu: Varsayılan navbarolarak 50pxyüksektir.

  body {
    padding-top: 70px;
  }

Ayrıca, bu örnek için kaynağa bir göz atın ve açın starter-template.css.

— Peter
kaynak

1

duyarlı css ve normal css arasına 60px dolgu ekledim ve iyi çalıştı

— Ajay Beniwal

1

sorun şu ki .. eğer önyüklemeyi özelleştirme bağlantısı ile özelleştirirsem .. o zaman duyarlı css'i ayrı olarak alamıyorum ... bu yüzden bunu iki bildirim arasında "arasında" sağlamanın bir yolu yok. Ayrıca bu benim normal ve duyarlı css arasına biraz etiket ekle tavsiyesi .. biraz hile gibi görünüyor. Değil mi? Bundan daha iyi bir çözüm olmalı.

— VJ.

LESS kullanıyorsanız, navbar yüksekliğini bulmak için bootstrap variable @ navbar-height kullanın.

— yankee

3

Bu, bir çözümden çok bir geçici çözümdür: Bu, sayfanın üst kısmına yardımcı olsa da, çapalar ve benzeri şeyler hala çalışmıyor. Bağlantıları kullanarak bir alt bölüme kaydırırsanız, alt bölümün başlığı gezinme çubuğunun arkasında olacaktır.

— mastov

1

Bu neden başladığını bilen var mı? birdenbire başıma gelmeye başladı ve bu hiç yokmuş gibi geldi ve hala onu kıran şeyin kaynağını bulamıyorum.

— Taylor Brown

37

Sanırım sorun , üstteki sabit gezinti çubuğunun sahip olduğu dinamik yükseklik ile ilgili . Örneğin, bir kullanıcı oturum açtığında, bir tür " Merhaba [Kullanıcı Adı] " görüntülemeniz gerekir ve ad çok geniş olduğunda, gezinme çubuğunun daha fazla yükseklik kullanması gerekir, böylece bu metin navbar menüsüyle çakışmaz . As navbar tarzı "vardır position: fixed " gizlenir, altındaki vücut kalır ve bunun bir uzun boylu bir bölümünü Gerekirse bu yüzden "dinamik" üst kısmında her zaman dolgu değiştirmek navbar aşağıda olacağını yükseklik değişiklikleri vaka senaryoları:

Sayfa yüklendi / yeniden yüklendi.
Tarayıcı penceresi, farklı bir duyarlı kesme noktasına ulaşabileceğinden yeniden boyutlandırılır.
Navbar içerik yükseklik değişikliğini provoke edecek bu şekilde doğrudan veya dolaylı olarak değiştirilir.

Bu dinamiklik, normal CSS tarafından kapsanmadığından , kullanıcı JavaScript'i etkinleştirmişse bu sorunu çözmenin yalnızca bir yolunu düşünebilirim . Durum senaryoları 1 ve 2'yi çözmek için lütfen aşağıdaki jQuery kod parçacığını deneyin ; senaryo 3 için lütfen navbar içeriğindeki herhangi bir değişiklikten sonra onResize () işlevini çağırmayı unutmayın :

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>

Snippet'i genişlet

— LuckyBrain
kaynak

Aradığım şey buydu. Pencere genişliğini depolayarak ve yalnızca dikey yeniden boyutlandırmanın değişip değişmediğini kontrol ederek optimize etti.

— Ripside

20

Sabit olandan önce boş bir gezinti çubuğu tanımlayın, ihtiyaç duyulan alanı yaratacaktır.

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

8

Bu, işleri yapmanın kötü bir yolu.

— DotSlashCoding

Kapat, ancak gerçek gezinme çubuğundaki öğelerin kaydırılmasını hesaba katmaz - oradaki tüm menüyü çoğaltmadığınız sürece.

— Ripside

@DotSlashCoding ile aynı fikirde olun, bu yaklaşım iyi bir kodlama uygulaması değildir (iyi bir sebep olmaksızın bakım testinde başarısız olur). Bu fazlalığın ne navbaryaptığı hemen belli değil .

— fragilewindows

Pragmatik ve havalı. Ayrıca bu konudaki tüm çözümlerin kötü olduğunu düşünüyorum.

— de.

8

Bunun nedeni, navbar-fixed-topsınıfla birlikte navbar'ın position:fixed. Bu, sırayla gezinme çubuğunu belge akışının dışına çıkarır ve gövde çubuğunun arkasındaki alanı kaplar .

Sen uygulamak gerekir padding-topya margin-topTo Your container, değerlerle gereksinimlerine göre >= 50px. (veya farklı değerlerle oynayın)

Temel önyükleme gezinme çubuğu etrafından dolaşıyor 40px. Eğer bir vermek Yani eğer padding-topya margin-topait 50px ya da daha, her zaman arasındaki nefes alanı olur konteyner ve gezinme çubuğu.

— Praveen Puglia
kaynak

6

Ben de bu sorunu yaşadım ancak komut dosyası olmadan ve sadece CSS kullanarak çözdüm. Bootstrap web sitesinde açıklanan 60px ayarlayarak sabit bir menü için önerilen padding-top'u takip ederek başlıyorum. Ardından, menümün de yeniden boyutlandırıldığı kesme noktalarında dolguyu yeniden boyutlandıran üç medya etiketi ekledim.

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

Bir not, menü genişliğim 768 ile 991 arasında olduğunda, düzenimdeki menü logosu artı <li>seçenekler menünün iki satıra kaymasına neden oluyor. Bu nedenle, menünün içeriği örtmesini engellemek için padding-top'u ayarlamak zorunda kaldım, dolayısıyla 110px.

Bu yardımcı olur umarım...

— Harvey Mushman
kaynak

6

Bu iş parçacığının eski olduğunu biliyorum, ancak tam olarak bu soruna yeni girdim ve page-headersayfamdaki, gezinme altındaki sınıfı kullanarak sorunu çözdüm. Ayrıca <nav>yerine etiketi kullandım <div>ama farklı bir davranış sergileyeceğinden emin değilim.

page-headerSayfa için bir kap olarak kullanarak <body>, yalnızca size verdiği varsayılan alana katılmıyorsanız, onunla uğraşmanıza gerek kalmaz 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>

Snippet'i genişlet

— Zorkind
kaynak

3

jquery kullanarak çözdüm

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

Snippet'i genişlet

— CruzDelSur
kaynak