0

Estoy realizando un sitio con Bootstrap y tengo el siguiente problema, al hacer scroll en el sitio web, el sidebar lo acompaña y el contenido se pierde de la siguiente manera:

Sitio sin scroll Sitio con scroll

El código es el siguiente:

<div class="container-fluid">
    <div class="row flex-nowrap">
    <div class="col-auto d-none d-sm-block col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
        <div class="d-flex flex-column align-items-center align-items-md-start px-3 pt-2 text-white min-vh-100">
        <!-- Sidebar -->
        </div>
    </div>
        <div class="col">
            {{- partial "header.html" . }}
            <div id="content">
                <p>Hola</p>
                <p>Hola</p>
                <p>Hola</p>
                <p>Hola</p>
                <p>Hola</p>
                <p>Hola</p>
                <p>Hola</p>
                {{- block "main" . }}{{- end }}
            </div>
            {{- partial "footer.html" . }}
        </div>
    </div>
</div>

El objetivo seria que el sidebar mantenga el contenido en el foco de la pantalla ignorando la posición del contenido a la derecha.

3
  • 1
    Buen día, agrega position-fixed a las clases de tu sidebar por cierto tienes elementos con clases innecesarias o que se "cancelan" mutuamente, sería bueno que utilizaras el inspector y vieras en qué afecta cada clase Commented el 26 jun. 2022 a las 0:21
  • Gracias me ha servido tu respuesta, ahora tengo otra duda con respecto al propio sidebar, cuando la pantalla se encoge verticalmente no es posible hacer scroll en el sidebar, ¿hay forma de hacer dos scrolls independientes (tanto para sidebar como contenido)? Commented el 26 jun. 2022 a las 4:21
  • Otra duda = Nueva pregunta. No uses los comentarios para nuevas preguntas, gracias.
    – masterguru
    Commented el 26 jun. 2022 a las 18:21

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.