css - div - row fluid bootstrap 4
Se corrigió la barra lateral de navegación en Twitter bootstrap 2.0 (7)
Comencé con las respuestas de Andrés y terminé obteniendo una barra lateral adhesiva como esta:
HTML:
<div class="span3 sidebar-width">
<div class="well sidebar-nav-fixed">
Sidebar
</div>
</div>
<div class="span9 span-fixed-sidebar">
Content
</div> <!-- /span -->
CSS:
.sidebar-nav-fixed {
position:fixed;
}
JS / jQuery:
sidebarwidth = $(".sidebar-width").css(''width'');
$(''.sidebar-nav-fixed'').css(''width'', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$(''.span-fixed-sidebar'').css(''marginLeft'', contentmargin);
Supongo que también necesito que JS actualice la variable ''sidebarwidth'' cuando se cambia el tamaño de la ventana gráfica.
¿Es posible hacer que la navegación de la barra lateral permanezca siempre fija en desplazamiento en el diseño fluido?
Con la versión actual de Bootstrap (3.3.2) hay una buena manera de lograr una barra lateral fija para la navegación.
Esta solución también funciona bien con la clase de fluido de contenedor reintroducida, lo que significa que es muy posible tener un diseño receptivo de pantalla completa.
Normalmente, necesitaría usar anchos y márgenes fijos o la navegación se superpondrá al contenido, pero con la ayuda de la columna de marcador de posición vacía, el contenido siempre se coloca en el lugar correcto.
La siguiente configuración ajusta el contenido cuando cambia el tamaño de la ventana a menos de 768 px y libera la navegación fija.
Ver http://www.bootply.com/ePvnTy1VII para un ejemplo de trabajo.
CSS
@media (min-width: 767px) {
#navigation{
position: fixed;
}
}
HTML
<div class="container-fluid">
<div class="row">
<div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
<!-- Placeholder - keep empty -->
</div>
<div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
...
Huge Content
...
</div>
</div>
</div>
Esto no es posible sin javascript. Encuentro que affix.js es demasiado complejo, así que prefiero usar:
La última Boostrap (2.1.0) tiene una nueva característica JS "affix" específicamente para este tipo de aplicación, FYI.
Muy fácil de arreglar, nav o todo lo que quieras. Todo lo que necesita es escribir su etiqueta de reparación de esta manera, y ponerla en su sección de cuerpo
<div style="position: fixed">
test - try scroll again.
</div>
esto arruinará el diseño web receptivo. Mejor envuelva la barra lateral fija en una consulta de medios.
CSS
@media (min-width: 768px) {
.sb-fixed{
position: fixed;
}
}
HTML
<div class="span3 sb-fixed">
<div class="well sidebar-nav">
<!-- Sidebar Contents -->
</div>
</div>
Ahora la barra lateral solo está fija, si el viewpot es más grande que 768px.
Nota: Hay un plugin jQuery bootstrap que hace esto y mucho más que se introdujo algunas versiones después de que se escribió esta respuesta (hace casi dos años) llamada Affix . Esta respuesta solo se aplica si está usando Bootstrap 2.0.4 o inferior.
Sí, simplemente cree una nueva clase fija para su barra lateral y agregue una clase de compensación a su div de contenido para compensar el margen izquierdo, así:
CSS
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
Demostración: http://jsfiddle.net/U8HGz/1/show/ Editar aquí: http://jsfiddle.net/U8HGz/1/
Actualizar
Se corrigió mi demostración para admitir la hoja de arranque de respuesta, ahora fluye con la función de respuesta del programa de arranque.
Nota: Esta demostración fluye con la barra de navegación fija superior, por lo que ambos elementos se position:static al cambiar el tamaño de la pantalla, coloqué otra demostración debajo que mantiene la barra lateral fija hasta que la pantalla se desactiva para la vista móvil.
CSS
.sidebar-nav-fixed {
position:fixed;
top:60px;
width:21.97%;
}
@media (max-width: 767px) {
.sidebar-nav-fixed {
width:auto;
}
}
@media (max-width: 979px) {
.sidebar-nav-fixed {
position:static;
width: auto;
}
}
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav sidebar-nav-fixed">
...
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
...
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
nota menor: hay una diferencia de aproximadamente 10px / 1% en el ancho de la barra lateral fija, es debido al hecho de que, dado que no hereda el ancho del divisor de contenedor span3 porque es fijo tuve que encontrar una anchura. Está lo suficientemente cerca.
Y aquí hay otro método si desea mantener la barra lateral fija hasta que la cuadrícula se reduzca para la pantalla pequeña / vista móvil.
CSS
.sidebar-nav-fixed {
position:fixed;
top:60px;
width:21.97%;
}
@media (max-width: 767px) {
.sidebar-nav-fixed {
position:static;
width:auto;
}
}
@media (max-width: 979px) {
.sidebar-nav-fixed {
top:70px;
}
}