es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo sacar una caja de color de un elemento contenedor de Bootstrap?

21 Jul, 2023 Programación

Así que he probado algunas de las soluciones proporcionadas aquí (y en otros lugares de la web) para ver si podía salir del contenedor de bootstrap, pero no tengo suerte. Para describirlo, tengo un .fluid-container para poner un fondo de ancho completo detrás de un .container normal. Donde las cosas se complican es que necesito que la primera columna en .container se extienda todo el camino hacia el borde izquierdo de la pantalla.

Cómo debería verse:

Imagen

Lo que he logrado hacer:

Imagen

Aquí está mi HTML:

<div class="container-fluid bg-darkblue bg-image-footer py-5">
        <div class="container">
            <div class="row" id="footer-content">
                <div class="col-5 px-0 py-3 bg-limegreen">
                    Formulario de contenido aquí.
                </div>
                <div class="col-1"> </div>
                <div class="col-2 text-white">
                    <p class="avenir text-limegreen text-upper">Contáctanos</p>
                    <p>(202) 555-1212</p>
                    <p>correo@ejemplo.com</p>
                    <p>Ciudad de Nueva York, NY</p>
                </div>
                <div class="col-2">
                    <p class="avenir text-limegreen text-upper">Nombre del Cliente</p>
                    <p>Acerca de</p>
                    <p>Empleos</p>
                    <p>Accesibilidad</p>
                </div>
                <div class="col-2">
                    <p class="avenir text-limegreen text-upper">Redes Sociales</p>
                </div>
            </div>
        </div>
    </div>

Para reiterar, el objetivo aquí es mover el borde izquierdo del cuadro verde lima hasta el borde izquierdo de la pantalla, sin mover el borde derecho fuera del sistema de cuadrícula o alterar el resto del diseño.

Todo el CSS es Bootstrap 5 sencillo, con excepción de algunas cosas para controlar el color como .bg-limegreen.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, puedes usar la propiedad position y establecerla en absolute para el cuadro verde lima, y luego ajustar sus dimensiones y propiedades left para hacer que se extienda hasta el borde izquierdo de la pantalla. Aquí está el código CSS actualizado para el cuadro verde lima:

    .bg-limegreen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc((100vw - 100%) / 2);
}

    Esto hará que el cuadro verde lima se extienda hasta el borde izquierdo de la pantalla mientras mantiene su posición en el contenedor. Sin embargo, es posible que debas ajustar la propiedad de ancho dependiendo del tamaño de tu pantalla y de la configuración del contenedor.

    Además, para asegurarte de que las demás columnas en el elemento .row no se vean afectadas, puedes agregar position: relative al elemento .row para crear un nuevo contexto de apilamiento.

    #footer-content {
    position: relative;
}

    Con estos cambios, el cuadro verde lima debería extenderse hasta el borde izquierdo de la pantalla sin afectar el resto del diseño.

Comments are closed.