tutorial - Twitter Bootstrap-Afijo de respuesta

bootstrap tutorial

Question

Estoy usando Twitter Bootstrap y tengo lo siguiente:

<div class="row">

    <div class="span3">
        <div data-spy="affix">
            <form>
                <!-- inputs and stuff -->
            </form>
        </div>
    </div>

    <!-- span9 and its contents -->

</div>

Bootstrap aplica correctamente el efecto de afijo en <div> y permanece fijo cuando me desplazo hacia abajo en la página. Sin embargo, una vez que cambio el tamaño de la página a las dimensiones móviles y se producen los efectos de arranque (barra de navegación colapsando / objetos que se alinean muy bien uno debajo del otro), el <div> adherido está ahora encima de otros elementos de la página y se vuelve desordenado. Esto está sucediendo porque .affix tiene una position: fixed que explica bastante bien.

Ahora fui al sitio web de Bootstrap y cambié el tamaño de la página a las dimensiones móviles, el elemento fijo ( <ul> en su caso) comienza a fluir muy bien con la página, tomando su lugar natural sin estar encima de otros elementos. También noté que una vez que eso sucede, la clase cambia de affix a affix-top .

No estoy seguro si esta es su personalización o si es parte del marco, porque el marco aparentemente no se está comportando de la misma manera. ¿Alguien puede explicar esto? Necesito tener el mismo comportamiento en mi <div> donde si la página cambia de tamaño a las dimensiones móviles, el elemento fijo toma su lugar natural.

Editar: Mi observación es un poco defectuosa. Noté que el elemento en su página inicialmente tiene affix-top y una vez que me desplazo debajo de data-top-offset cambia a affix . Todavía no explica por qué mi <div> no se renderizará como su <ul> cuando cambie de tamaño.

Answer 1

Bootstrap usa un archivo CSS adicional para sus documentos que anula el comportamiento predeterminado de algunos elementos.

Específicamente, en la línea 917, cambian la position de la barra lateral adherida (como parte de una consulta de medios para <ancho de 767px) a static :

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

Tienen varios estilos personalizados adicionales aplicados a la barra lateral adherida; puede verlos usando Chrome Web Inspector / Firebug en una ventana del tamaño de un teléfono.

Answer 2

Tuve el mismo problema, y ​​mi solución fue eliminar el comportamiento del afijo para tamaños de pantalla más pequeños. Por ejemplo, para eliminarlo para tamaños inferiores a 1199 píxeles:

#map {

  @media (min-width: 1199px) {
    &.affix-top {
    }

    &.affix {
      position: fixed;
      top: 20px;
      bottom: 100px;
    }

    &.affix-bottom {
    }
  }
}

Answer 3

HTML No coloque el DIV span3 (o span4, etc.) sino un hijo de él; en mi caso, coloqué #sidebar. Además, no es necesario agregar .affix class o data-offset-top = "XXX" a este div. El siguiente Javascript hará el truco.

  <aside class="span3">
    <div id="sidebar">
     <p>some content</p>
    </div>
  </aside> 

CSS (el código siguiente no existe en bootstrap.css, lo copié de http://twitter.github.io/bootstrap/assets/css/docs.css )

.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 400px;
}

Javacript el siguiente js cambiará la clase de #sidebar de .affix a .affix-bottom según la cantidad de página que se desplaza

   $(''#sidebar'').affix({
      offset: {
        bottom: 450
      }
   });

De hecho, en pequeñas resoluciones #sidebar se superpondrá a otros elementos. Para resolver esto, use las consultas de medios de bootstrap http://twitter.github.io/bootstrap/scaffolding.html#responsive

Como Sara señaló anteriormente, puedes usar algo como ...

@media(max-width:767px){
   .affix {
     position: static;
     width: auto;
     top: 0;
    }
}

..so que haces que la #sidebar se comporte.

Espero que esto ayude a alguien!