Bootstrap CSS versteckt einen Teil des Containers unter der Navigationsleiste

127

Ich baue ein Projekt mit Bootstrap und habe ein kleines Problem. Ich habe einen Container unter dem Nav-Top. Mein Problem ist, dass ein Teil meines Containers unter dem Nav-Top-Header versteckt ist. Ich möchte keinen Top-Rand mit verwenden Container. Bitte sehen Sie unten HTML, in dem ich mit dem Problem konfrontiert bin

<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
quelle
Aus den Bootstrap-Dokumenten: Fixed to top Fügen Sie .navbar-fixed-top hinzu und denken Sie daran, den verborgenen Bereich darunter zu berücksichtigen, indem Sie dem <body> mindestens 40px Padding hinzufügen. Stellen Sie sicher, dass Sie dies nach dem Bootstrap-Kern-CSS und vor dem optionalen responsiven CSS hinzufügen.
cms_mgr

Antworten:

215

Dies wird durch Hinzufügen einiger paddingam oberen Rand des <body>.

Tipp: Standardmäßig ist der Wert hoch..navbar-fixed-topnavbar50px

  body {
    padding-top: 70px;
  }

Schauen Sie sich auch die Quelle für dieses Beispiel an und öffnen Sie sie starter-template.css.

Peter
quelle
1
Ich habe 60px Padding zwischen Responsive CSS und normalem CSS hinzugefügt und es hat gut funktioniert
Ajay Beniwal
1
Das Problem ist ... wenn ich den Bootstrap über den Link "Anpassen" anpasse ... dann erhalte ich keine separate Antwort auf CSS ... daher gibt es keine Möglichkeit, dies "zwischen" den beiden Deklarationen bereitzustellen. Auch dieser Add-Some-Tag-zwischen-meinem-normalen-und-Responsive-CSS-Ratschlag .. scheint ein bisschen hackisch. Nicht wahr? Es muss eine bessere Lösung geben.
VJ.
Wenn Sie WENIGER verwenden, verwenden Sie die Bootstrap-Variable @ navbar-height, um die Navbar-Höhe zu ermitteln.
Yankee
3
Dies ist eher eine Umgehung als eine Lösung: Während dies am oberen Rand der Seite hilft, funktionieren Anker und dergleichen immer noch nicht. Wenn Sie mit Ankern zu einem Unterabschnitt scrollen, befindet sich der Titel des Unterabschnitts hinter der Navigationsleiste.
Mastov
1
Warum fängt das überhaupt an, weiß jemand Bescheid? Es passierte mir gerade, was sich wie aus dem Nichts anfühlte und ich kann immer noch nicht die Quelle finden, von der es anfangs kaputt war.
Taylor Brown
37

Ich denke, das Problem, das Sie haben, hängt mit der dynamischen Höhe zusammen, die die feste Navigationsleiste oben hat. Wenn sich ein Benutzer anmeldet, müssen Sie beispielsweise eine Art " Hallo [Benutzername] " anzeigen. Wenn der Name zu breit ist, muss die Navigationsleiste mehr Höhe verwenden, damit sich dieser Text nicht mit dem Navigationsleistenmenü überschneidet . Da die Navigationsleiste den Stil " Position: fest " hat, bleibt der Körper darunter und ein größerer Teil davon wird ausgeblendet, sodass Sie die Polsterung oben jedes Mal "dynamisch" ändern müssen, wenn sich die Höhe der Navigationsleiste ändert, was im Folgenden passieren würde Fallszenarien:

  1. Die Seite wird geladen / neu geladen.
  2. Die Größe des Browserfensters wird geändert, da dies einen anderen reaktionsfähigen Haltepunkt erreichen kann.
  3. Der Inhalt der Navigationsleiste wird direkt oder indirekt geändert, da dies zu einer Höhenänderung führen kann.

Diese Dynamik wird von regulärem CSS nicht abgedeckt, daher kann ich mir nur einen Weg vorstellen, um dieses Problem zu lösen, wenn der Benutzer JavaScript aktiviert hat. Bitte versuchen Sie das folgende jQuery- Code-Snippet, um die Fallszenarien 1 und 2 zu lösen. Denken Sie für Fall 3 daran, die Funktion onResize () nach jeder Änderung des Navigationsleisteninhalts aufzurufen :

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>
Erweitern Sie das Snippet

LuckyBrain
quelle
Das habe ich gesucht. Optimiert durch Speichern der Fensterbreite und Überprüfen, ob sich nur die vertikale Größenänderung geändert hat.
Ripside
20

Definieren Sie einfach eine leere Navigationsleiste vor der festen, um den benötigten Platz zu schaffen.

<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
quelle
8
Dies ist eine böse Art, Dinge zu tun.
DotSlashCoding
Schließen, berücksichtigt jedoch nicht das Umschließen von Elementen in der realen Navigationsleiste - es sei denn, Sie duplizieren dort das gesamte Menü.
Ripside
Stimmen Sie mit @DotSlashCoding überein, dieser Ansatz ist keine gute Codierungspraxis (fehlgeschlagener Wartungstest ohne guten Grund). Es ist nicht sofort klar, was dieses Extra navbarbewirkt.
fragilewindows
Pragmatisch und cool. Ich denke auch, dass alle Lösungen für dieses Problem böse sind.
de.
8

Es passiert, weil mit navbar-fixed-topKlasse die Navigationsleiste die bekommt position:fixed. Dadurch wird die Navigationsleiste aus dem Dokumentenfluss entfernt, sodass der Körper den Platz hinter der Navigationsleiste einnimmt.

Sie müssen sich bewerben padding-topoder margin-topauf Ihre container, basierend auf Ihren Anforderungen mit Werten >= 50px. (oder mit verschiedenen Werten herumspielen)

Die grundlegende Bootstrap- Navigationsleiste nimmt eine Höhe an 40px. Wenn Sie also ein padding-topoder margin-topvon 50px oder mehr geben, haben Sie immer diese Atempause zwischen Ihrem Container und der Navigationsleiste.

Praveen Apulien
quelle
6

Auch ich hatte dieses Problem, löste es aber ohne Skript und nur mit CSS. Ich beginne damit, dem empfohlenen Padding-Top für ein festes Menü zu folgen, indem ich 60px einstelle, wie auf der Bootstrap-Website beschrieben. Dann habe ich drei Medien-Tags hinzugefügt, die die Größe des Auffüllens an den Grenzpunkten ändern, an denen auch die Größe meines Menüs geändert wird.

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

Ein Hinweis: Wenn meine Menübreite zwischen 768 und 991 liegt, wird das Menü durch das Menülogo in meinem Layout und die <li>Optionen in zwei Zeilen umgebrochen. Daher musste ich das Padding-Top anpassen, um zu verhindern, dass das Menü den Inhalt abdeckt, also 110px.

Hoffe das hilft...

Harvey Mushman
quelle
6

Ich weiß, dass dieser Thread alt ist, aber ich bin gerade auf dieses Problem gestoßen und habe es behoben, indem ich einfach die page-headerKlasse auf meiner Seite unter dem Navi verwendet habe. Ich habe auch das <nav>Tag anstelle von verwendet, <div>aber ich bin nicht sicher, ob es ein anderes Verhalten zeigen würde.

Wenn Sie das page-headerals Container für die Seite verwenden, müssen Sie sich <body>nur dann mit dem herumschlagen, wenn Sie mit dem Standardspeicherplatz, den Sie erhalten, nicht einverstanden sind 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>
Erweitern Sie das Snippet

Zorkind
quelle
3

Ich habe es mit JQuery gelöst

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

CruzDelSur
quelle