0

Se sobrepasa el contenedor hasta la parte de arriba del header cuando muevo el scroll del mouse. ¿Me pueden indicar cómo podría arreglar eso o alguna forma de evitarlo?

// codigo del contenedor

<div class="content-container" style="padding-top: 150px;">
    <div class="container-fluid">
        <div class="superior">
            <div class="card text-center">
                <div class="card-body">
                    <h1 class="card-title">Bienvenido a </h1>
                </div>
            </div>
        </div>
    </div>
</div>
1
  • ¿Cuál es el problema, exactamente? ¿Y cuál es el comportamiento esperado? el 1 abr. 2021 a las 21:23

1 respuesta 1

1

No comprendo exactamente tu pregunta y es difícil ayudarte si no compartes el resto del HTML y CSS. Pero si quieres que el contenedor de "Bienvenido a " quede fijo al realizar scroll debes utilizar la propiedad fixed o sticky, depende de lo que quieras.

En este caso que ocupas Bootstrap, no comprendo el para que utilizar la clase "card", si necesitas una barra superior esta debe utilizar la clase "nav". Además, la clase "content-container" está demás a mi criterio....pero todo depende de cual sea la finalidad.

Otra posible solución, es que debes fijarte que etiquetas están conteniendo a tus div de interés.

Te recomendaría leer lo siguiente para que entiendas mejor el funcionamiento de bootstrap: https://www.w3schools.com/bootstrap4/default.asp

De todas formas, para entender lo que sucede puedes utilizar lo siguiente:

* {
   border: 1px solid red; 
}

Esto te permite ver el espacio que ocupa cada elemento dentro del HTML, y puedes ir viendo cual es el div que tiene problemas.

Creo que algo así, es lo que quieres(?):

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
     <a class="navbar-brand" href="#">aqui nombre página</a>
      <span class="navbar-text">
           Bienvenido
      </span>
</nav>
0

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.