twitter-bootstrap - tutorial - bootstrap español

Twitter Bootstrap: barra de navegación superior que bloquea el contenido superior de la página

Question

Tengo este código de Twitter Bootstrap

  <div class=''navbar navbar-fixed-top''>
    <div class=''navbar-inner''>
      <div class=''container''>
        <a class=''btn btn-navbar'' data-target=''.nav-collapse'' data-toggle=''collapse''>
          <span class=''icon-bar''></span>
          <span class=''icon-bar''></span>
          <span class=''icon-bar''></span>
        </a>
        <div class=''nav-collapse''>
          <ul class=''nav''>
            <li class=''active''>
              <a href=''some_url''>My Home</a>
            </li>
            <li>
              <a href=''some_url''>Option 1 </a>
            </li>
            <li>
              <a href=''some_url''>Another option</a>
            </li>
            <li>
              <a href=''some_url''>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Pero cuando estoy viendo el comienzo de la página, la barra de navegación está bloqueando parte del contenido que está cerca de la parte superior de la página. ¿Alguna idea de cómo hacer que baje el resto del contenido hacia abajo cuando se ve la parte superior de la página para que el contenido no quede bloqueado por la barra de navegación?

Answer 1

Añadir a tu CSS:

body { 
    padding-top: 65px; 
}

De los documentos de Bootstrap :

La barra de navegación fija superpondrá su otro contenido, a menos que agregue relleno en la parte superior del cuerpo.

Answer 2

Agregar un relleno como ese no es suficiente si está usando bootstrap sensible. En este caso, cuando cambie el tamaño de la ventana, obtendrá un espacio entre la parte superior de la página y la barra de navegación. Una solución adecuada se ve así:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Answer 3

Agregue a su JS:

jQuery(document).ready(function($) {
  $("body").css({
    ''padding-top'': $(".navbar").outerHeight() + ''px''
  })
});

Answer 4

Como se ve en este ejemplo de Twitter, agregue esto antes de la línea que incluye las declaraciones de estilos de respuesta:

<style> 
    body {
        padding-top: 60px;
    }
</style>

Al igual que:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

Answer 5

Dos problemas sucederán aquí:

1. Carga de página (contenido oculto)
2. Los enlaces internos como este se desplazarán hacia la parte superior y se ocultarán con la barra de navegación:

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I''m 70 pixels hidden! -->

Bootstrap 4 w / enlaces de página interna

Para corregir 1), como dijo Martijn Burger arriba, la plantilla de inicio de bootstrap v4 css usa:

body {
  padding-top: 5rem;
}

Para solucionar 2) echa un vistazo a este problema . Este código funciona principalmente (pero no en el segundo clic del mismo hash):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

Este código anima los enlaces A con jQuery (no delgado jQuery):

  // inline theme global code here
  $(document).ready(function() {
    var body = $(''html,body''), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $(''a[href*=//#]'').on(''click'', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

Answer 6

En mi proyecto derivado del tutorial MVC 5 , encontré que cambiar el relleno del cuerpo no tuvo ningún efecto. Lo siguiente me funcionó:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

Resuelve los casos en que la barra de navegación se pliega en 2 o 3 líneas. Esto se puede insertar en bootstrap.css en cualquier lugar después del cuerpo de las líneas {margin: 0; }

Answer 7

Estoy usando jQuery para resolver este problema. Este es el fragmento de BS 3.0.0:

$(window).resize(function () { 
    $(''body'').css(''padding-top'', parseInt($(''#main-navbar'').css("height"))+10);
});

$(window).load(function () { 
    $(''body'').css(''padding-top'', parseInt($(''#main-navbar'').css("height"))+10);        
});

Answer 8

He tenido un gran éxito al crear una barra de navegación no fija ficticia justo antes de mi barra de navegación fija real.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

El espaciado funciona muy bien en todos los tamaños de pantalla.

Answer 9

La plantilla de arranque de bootstrap v4 css usa:

body {
  padding-top: 5rem;
}

Answer 10

Para bootstrap 3, la clase navbar-static-top lugar de navbar-fixed-top evita este problema, a menos que necesite que la barra de navegación esté siempre visible.

Answer 11

Puedes establecer un margen basado en la resolución de la pantalla.

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}

Answer 12

Usando MVC 5, la forma en que arreglé la mía, fue simplemente agregar mi propio Site.css, cargado después de los demás, con la siguiente línea: body{padding: 0}

y cambié el código al principio de _Layout.cshtml, para ser:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

Answer 13

Usar el percentage es una solución mucho mejor que los pixels .

body {
  padding-top: 10%; //This works regardless of display size.
}

Si es necesario, aún puede ser explícito agregando diferentes breakpoints como se menciona en otra respuesta de @spajus

Answer 14

con navbar navbar-default todo funciona bien, pero si está usando navbar-fixed-top , debe incluir el cuerpo de estilo personalizado {padding-top: 60px;} de lo contrario, bloqueará el contenido debajo.

Answer 15

deberías agregar

 #page 
 { 
   padding-top: 65px
 }

Para no destruir un pie de página pegajoso o algo más

Answer 16

una solución mucho más práctica para su referencia, funciona perfectamente en todos mis proyectos:

cambia tu primer ''div'' de

<div class=''navbar navbar-fixed-top''>

a

<div class="navbar navbar-default navbar-static-top">

Answer 17

<div class=''navbar'' data-spy="affix" data-offset-top="0">

Si su barra de navegación se encuentra originalmente en la parte superior de la página, establezca el valor en 0. De lo contrario, establezca el valor de data-offset-top en el valor del contenido sobre su barra de navegación.

Mientras tanto, necesitas modificar el css como tal:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}