Así que aquí tengo un problema con Bootstrap 4 (y también flexbox). Aquí está el código:
HTML:

<section id="intro">  
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col align-self-center">
                <h1>We design things</h1>
            </div>
        </div>
    </div>
</section>

Y CSS:

#intro {
    min-height: 65vh;
    background-image: url("../img/intro.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.container-fluid {
    height: 100%;
    min-height: 100%;
}

Quiero que el .contenedor de fluido a ser siempre el 100% de padres de altura, por lo que si la sección tiene 100vh, el envase debe también, si se ha 50vh también debe tener 50vh. ¿Cómo puedo hacer eso? Yo no puedo centro de algo utilizando flexbox si la altura es la altura de la h1.

OriginalEl autor grhu | 2017-01-24

1 Comentario

  1. 5

    En general, cuando se desea que un elemento esté a la altura de su padre, hacer que los padres de un contenedor flex.

    #intro {
        min-height: 65vh;
        background-image: url("../img/intro.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex; /* NEW */
    }

    Un ajuste inicial de un contenedor flex es align-items: stretch. Esto significa que los hijos de un contenedor flex automáticamente tramo completo cruz-tamaño del contenedor. En la fila de la dirección de la que sería la altura. Por lo tanto, aplicar display: flex o display: inline-flex a section#intro.

    Por desgracia, no funcionó – contenedor está ahora centrada, pero todavía tiene la altura de un elemento h1, no de la sección.
    Su pregunta fue acerca de hacer container-flud la misma altura que la de los padres.
    Aquí está todo el código: codepen.io/GRHU/pen/jywoQV Sí, yo quiero hacer .contenedor de fluido, que está dentro de la #sección de introducción de la altura completa de su padre, que es 65vh y, a continuación, utilizar Bootstrap 4 clase para hacerla centrado horizontal y verticalmente.
    Flex diseño sólo funciona entre el padre y el hijo. Si desea aplicar propiedades de flexibilidad a la h1, entonces usted necesita para hacer su padre un contenedor flex (y quitar artificial alturas): revisado codepen
    La adición de display: flex .contenedor de líquido fijo, pero estaba tan seguro de Boostrap 4, que se supone para ser construido con flexbox la tiene por defecto – resulta que sólo las filas flex propiedad que es raro. Muchas gracias por tu ayuda.

    OriginalEl autor Michael_B

Dejar respuesta

Please enter your comment!
Please enter your name here