Cómo crear un fijo de la barra lateral de diseño con Bootstrap 4?

Estoy tratando de crear un diseño como la captura de pantalla usando Bootstrap 4, pero estoy teniendo algunos problemas con la fabricación de la barra lateral fija y el logro de este diseño al mismo tiempo.

Vamos con un ejemplo básico:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div

Es posible obtener este diseño, pero las cosas se ponen difíciles una vez que declaro:

.sidebar {
position: fixed //or absolute
}

Una vez que la barra lateral pegajosa, el principal div empieza a aparecer detrás de la barra lateral en lugar de a su lado. Por supuesto, es posible declarar un cierto margen y empujar de nuevo a su posición original, pero hace las cosas complicadas para la capacidad de respuesta.

Me siento como que me falta algo, he leído el Bootstrap 4 documentación, pero no pude encontrar una manera sencilla de lograr este diseño.

OriginalEl autor cinnaroll45 | 2016-11-08

2 Comentarios

  1. 33

    Actualizado 2018

    Aquí una respuesta actualizada de la última Bootstrap 4.0.0. Esta versión tiene clases que le ayudarán a crear un pegajosa o fijo de la barra lateral sin el CSS extra….

    Uso sticky-top:

    <div class="container">
        <div class="row py-3">
            <div class="col-3 order-2" id="sticky-sidebar">
                <div class="sticky-top">
                    ...
                </div>
            </div>
            <div class="col" id="main">
                <h1>Main Area</h1>
                ...   
            </div>
        </div>
    </div>

    Demo: https://www.codeply.com/go/O9GMYBer4l

    o, uso position-fixed:

    <div class="container-fluid">
        <div class="row">
            <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
                ...
            </div>
            <div class="col offset-3" id="main">
                <h1>Main Area</h1>
                ...
            </div>
        </div>
    </div>

    Véase también:

    Fijas y desplazables columna en Bootstrap 4 flexbox

    Bootstrap col posición fija

    Cómo usar CSS posición pegajosa para mantener una barra lateral visible con Bootstrap 4

    Crear una capacidad de respuesta barra de navegación de la barra lateral «de cajón» en Bootstrap 4?

    solución agradable, pero tenemos que esperar para apoyar plenamente «pegajoso» en los navegadores
    Re: #1 ¿y si a la altura de la barra lateral de contenido es más alto que el de la ventanilla? Con este método, la parte inferior-la mayoría del contenido de la barra lateral se ocultan en la ventanilla hasta que el usuario llegue a la parte inferior de la Principal Área de contenido. Barra lateral debe permitir el desplazamiento de revelar todas vertical de contenido.
    Puedo crear otro contenedor en la columna de la derecha, o que se considera una mala práctica?

    OriginalEl autor Zim

  2. -3

    Mi versión:

    div#dashmain { margin-left:150px; }
    div#dashside {position:fixed; width:150px; height:100%; }
    <div id="dashside"></div>
    <div id="dashmain">                        
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">Content</div>
            </div>            
        </div>        
    </div>

    OriginalEl autor Szurdoki Gábor

Dejar respuesta

Please enter your comment!
Please enter your name here