Bootstrap css oculta parte del contenedor debajo de la barra de navegación navbar-fixed-top

127

Estoy construyendo un proyecto con Bootstrap y estoy enfrentando un pequeño problema. Tengo un contenedor debajo del Nav-top. Mi problema es que una parte de mi contenedor está oculta debajo del encabezado nav-top. No quiero usar el margen superior con envase. Vea a continuación el 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>
css twitter-bootstrap Ajay Beniwal
fuente
De los documentos de bootstrap: Fijo en la parte superior Agregue .navbar-fixed-top y recuerde tener en cuenta el área oculta debajo agregando al menos 40px de relleno al <cuerpo>. Asegúrese de agregar esto después del CSS de Bootstrap principal y antes del CSS receptivo opcional.
cms_mgr

Respuestas:

215

Esto se maneja agregando algunos paddinga la parte superior de <body>.

Según la documentación de Bootstrap.navbar-fixed-top , pruebe sus propios valores o use nuestro fragmento a continuación. Consejo: Por defecto, el navbares 50pxalto.

  body {
    padding-top: 70px;
  }

Además, eche un vistazo a la fuente de este ejemplo y ábralo starter-template.css.

Peter
fuente
1
Agregué un relleno de 60px entre CSS sensible y CSS normal y funcionó bien
Ajay Beniwal
1
el problema es ... si personalizo el bootstrap a través del enlace de personalización ... entonces no obtengo CSS sensible por separado ... así que no hay forma de proporcionar esto "entre" las dos declaraciones. También este consejo add-some-tag-between-my-normal-and-responsive-css ... parece un poco hackish. ¿No es así? Tiene que haber una mejor solución que esta.
VJ.
Si está utilizando MENOS, use la variable bootstrap @ navbar-height para encontrar la altura de la barra de navegación.
Yankee
3
Esto es más una solución que una solución: si bien esto ayuda con la parte superior de la página, los anclajes y demás aún no funcionan. Si se desplaza a una subsección usando anclas, el título de la subsección estará detrás de la barra de navegación.
mastov
1
¿Por qué comienza esto a comenzar? ¿Alguien sabe? simplemente comenzó a sucederme, lo que me pareció de la nada y todavía no puedo encontrar la fuente de lo que lo rompió para empezar.
Taylor Brown
37

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, debe mostrar algún tipo de " Hola [Nombre de usuario] " y cuando el nombre es demasiado ancho, la barra de navegación debe 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: fija ", el cuerpo permanece debajo de ella y una parte más alta se oculta, por lo que debe cambiar "dinámicamente" el relleno en la parte superior cada vez que cambie la altura de la barra de navegación , lo que sucedería en lo siguiente escenarios de casos:

  1. La página se carga / recarga.
  2. La ventana del navegador cambia de tamaño ya que esto podría alcanzar un punto de corte de respuesta diferente.
  3. El contenido de la barra de navegación se modifica directa o indirectamente ya que esto podría provocar un cambio de altura.

Esta dinámica no está cubierta por CSS regular, por lo que solo puedo pensar en una forma de resolver este problema si el usuario tiene habilitado JavaScript . Pruebe el siguiente fragmento de código de jQuery para resolver los escenarios de caso 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>
Expandir fragmento

LuckyBrain
fuente
Esto es lo que estaba buscando. Lo optimizó almacenando el ancho de la ventana y verificando si solo ha cambiado el tamaño vertical.
Ripside
20

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>
moverse
fuente
8
Esta es una forma desagradable de hacer las cosas.
DotSlashCoding
Cierra, pero no tiene en cuenta el ajuste de elementos en la barra de navegación real, a menos que duplique todo el menú allí.
Ripside
De acuerdo con @DotSlashCoding, este enfoque no es una buena práctica de codificación (falla la prueba de mantenimiento sin una buena razón). No está claro de inmediato qué hace este extra navbar.
fragilewindows
Pragmático y fresco. También creo que todas las soluciones a este problema son desagradables.
de.
8

Ocurre porque con la navbar-fixed-topclase la barra de navegación obtiene el position:fixed. Esto a su vez saca la barra de navegación del flujo de documentos dejando que el cuerpo ocupe el espacio detrás la barra de navegación.

Debe aplicar padding-topo margin-topa su container, según sus requisitos con valores>= 50px . (o jugar con diferentes valores)

La barra de navegación básica de bootstrap toma altura 40px. Así que si se le da una padding-topo margin-topde 50px o más, siempre tendrá que respiro entre el contenedor y la barra de navegación.

Praveen Puglia
fuente
6

Yo también he tenido este problema, pero lo resolví sin script y solo usando CSS. Comienzo siguiendo el padding-top recomendado para un menú fijo mediante la configuración de 60px descrita en el sitio web 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 el <li> opciones hacen que el menú se ajuste a dos líneas. Por lo tanto, tuve que ajustar el relleno superior para evitar que el menú cubriera el contenido, por lo tanto, 110 px.

Espero que esto ayude...

Harvey Mushman
fuente
6

Sé que este hilo es antiguo, pero acabo de entrar en ese problema exacto y lo arreglé simplemente usando la page-headerclase en mi página, bajo el navegador. También usé la <nav>etiqueta en lugar de, <div>pero no estoy seguro de que presente un comportamiento diferente.

Al usar el page-headercomo contenedor para la página, no necesitará meterse con el <body>, solo si no está de acuerdo con el espacio predeterminado que page-headerle proporciona.

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

Zorkind
fuente
3

lo resolví usando jquery

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

CruzDelSur
fuente