Si me gustaría utilizar el complemento affix para barra lateral en el diseño fluido, pero el ancho de la barra lateral siempre cambia cuando se fija y el diseño receptivo tampoco funciona.Complemento Bootstrap Affix con diseño fluido
En la documentación de Bootstrap, el complemento de affix no se utiliza con el diseño fluido. Tal vez porque tienen el mismo problema.
¿Alguien sabe cómo hacerlo funcionar?
Para que el afijo funcione con una barra lateral span3, deberá agregar un javascript para ajustar el ancho y administrar el tamaño.
Acabo de escribir una pequeña función de JavaScript para que esto funcione.
Echa un vistazo this bug de bootstrap.
/*
* Clamped-width.
* Usage:
* <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function() {
var elem = $(this);
var parentPanel = elem.data('clampedwidth');
var resizeFn = function() {
var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
elem.css('width', sideBarNavWidth);
};
resizeFn();
$(window).resize(resizeFn);
});
La demostración adjunta en su sitio web es receptiva, se coloca en la parte superior de la página como se esperaba. La propiedad CSS position:fixed en dispositivos móviles y en pantallas más pequeñas no es una opción viable, por lo que se elimina la funcionalidad.
Gracias por su respuesta. Sí, la demostración es sensible, pero no con un sistema de red fluido. Y ahí está el problema. – Toki
@Toki olvidó por completo esta pregunta, solo notó su respuesta después de un downvote:/... probé el complemento bootsfix affix con una configuración fluida y parece estar funcionando bien con el último arranque, que supongo que era un problema que fijo. Aquí hay una demostración: http://jsbin.com/urinum/1 –
@ Andres-ilich: la demostración que señala incluye assets/css/docs.css, que tiene una adaptación específica para varios dispositivos. Consulte a continuación ' (at) media (max-width: 767px) { .bs-docs-sidenav.affix { posición: estático; ancho: automático; arriba: 0; } ' –
Tiene que establecer explícitamente la propiedad width (o min-width) para la barra lateral. Si miras la página que Andrés señaló, la clase "bs-docs-sidenav" tiene un ancho explícito de 228px.
Esto anula la clase ".span3" y evita que la barra lateral cambie de tamaño a medida que se desplaza.
Si elimina esa declaración explícita de ancho y desplaza la página, la barra lateral cambia de tamaño al igual que el problema que está viendo en su propia página.
Pero con un ancho fijo ya no es fluido. – SPIELER
$(document).ready(function() {
setTimeout(function() {
$('.sidebar > *').affix({
offset: {
top: function() { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
}, 100)
});
donde su página es como:
<div class="span2 navper">
<ul class="nav nav-tabs nav-stacked" data-spy="affix">
<li><a href="#">Homepage</a></li>
<li><a href="#">Homepage</a></li>
<li><a href="#">Homepage</a></li>
<li><a href="#">Homepage</a></li>
<li><a href="#">Homepage</a></li>
</ul>
</div>
Esa es la solución correcta – Benj
solución elegante, getting.container en bootstrap3, le da la posibilidad de tener una barra de navegación apilada fija bien –
Es posible que desee tener en cuenta las declaraciones 'box-model' aquí – Eric