css - pegajoso - menu que te sigue html
Bootstrap css oculta la parte del contenedor debajo de la barra de navegación. (7)
Esto se maneja añadiendo algo de padding a la parte superior del <body> .
Según la documentación de Bootstrap en .navbar-fixed-top , pruebe sus propios valores o use nuestro fragmento a continuación. Consejo: de forma predeterminada, la navbar tiene navbar alto.
body {
padding-top: 70px;
}
Además, eche un vistazo a la fuente de este ejemplo y abra starter-template.css .
Estoy construyendo un proyecto con Bootstrap y tengo poco problema. Tengo un contenedor debajo del navegador. Mi problema es que una parte de mi contenedor está oculta debajo del encabezado de navegación. No quiero usar el margen superior con envase. Pls ver a continuación html en el que estoy enfrentando el problema
<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>
Lo resolví usando jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $(''nav'').height() + 20;
$(''body'').animate({ paddingTop: h });
});
</script>
Sé que este hilo es antiguo, pero acabo de entrar en ese problema exactamente y lo solucioné simplemente usando la clase page-header en mi página, bajo el navegador. También usé la etiqueta <nav> lugar de <div> pero no estoy seguro de que presente un comportamiento diferente.
Al usar el page-header como contenedor de la página, no tendrá que meterse con el <body> , solo si no está de acuerdo con el espacio predeterminado que le brinda el page-header la 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>
Simplemente defina una barra de navegación vacía antes de la fija, creará el espacio necesario.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
Sucede porque con la navbar-fixed-top la barra de navegación obtiene la position:fixed . Esto, a su vez, saca la barra de navegación del flujo de documentos y deja el cuerpo para ocupar el espacio detrás de la barra de navegación.
padding-top aplicar padding-top o margin-top a su container , en función de sus requisitos con valores >= 50px . (o juega con diferentes valores)
La barra de navegación del bootstrap básico toma una altura de alrededor de 40px . Entonces, si le da un margin-top padding-top o margin-top de 50px o superior, siempre tendrá ese espacio para respirar entre su contenedor y la barra de navegación.
Supongo que el problema que tienes está relacionado con la altura dinámica que tiene la barra de navegación fija en la parte superior. Por ejemplo, cuando un usuario inicia sesión, necesita mostrar algún tipo de " Hola [Nombre de usuario] " y cuando el nombre es demasiado ancho, la barra de navegación necesita usar más altura para que este texto no se superponga con el menú de la barra de navegación . Como la barra de navegación tiene el estilo " posición: fijo ", el cuerpo permanece debajo y una parte más alta se oculta, por lo que debe cambiar "dinámicamente" el relleno en la parte superior cada vez que cambia la altura de la barra de navegación , lo que sucedería en el siguiente escenarios de casos:
- La página se carga / recarga.
- La ventana del navegador se redimensiona, ya que podría llegar a un punto de interrupción de respuesta diferente.
- El contenido de la barra de navegación se modifica directa o indirectamente, ya que podría provocar un cambio de altura.
Esta dinámica no está cubierta por CSS regular, así que solo puedo pensar en una forma de resolver este problema si el usuario tiene habilitado JavaScript . Pruebe el siguiente fragmento de código jQuery para resolver los casos 1 y 2; para el caso 3, recuerde llamar a la función onResize () después de cualquier cambio en el contenido de la barra de navegació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>
Yo también tuve este problema, pero lo resolví sin script y solo usé CSS. Empiezo por seguir el padding-top recomendado para un menú fijo configurando 60 px que se describe en el sitio web de Bootstrap. Luego agregué tres etiquetas de medios que redimensionan el relleno en los puntos de corte donde mi menú también cambia de tamaño.
<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>
Una nota, cuando el ancho de mi menú está entre 768 y 991, el logotipo del menú en mi diseño más las opciones <li> hacen que el menú se ajuste a dos líneas. Por lo tanto, tuve que ajustar el relleno para evitar que el menú cubriera el contenido, por lo tanto 110px.
Espero que esto ayude...