Así que quiero colocar el botón Atrás en la parte inferior de la página (respetando el relleno 2Rem en la clase "Tamanho1"). Sin embargo, no sé cómo hacerlo.

¿Alguna investigación, la mayoría de ellos sugirieron usar:

"Align-Contenido: espacio entre"

Probado en la clase "Tamanho1", pero no funciona, también intentó agregar una clase "align-self-end" en el botón de enlace posterior, pero aún no funciona. ¿Por qué? = (((((

Aquí está mi código:

    <style>
        
.container {
    background-color: white;
}

.container-especial{
    background-color: rgb(185, 185, 185) !important;
}

.tamanho1{
    background-color: white;
    margin-top:2rem;
    margin-bottom: 2rem;
    max-width: 90%;
    height: 95%;
    padding: 2rem 4rem;
    align-content: space-between;
}

#nav-Gest {
    background-color: rgba(182, 162, 201, 0.658);
    color: white;
}

.botao-maior {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    text-align: center;
}


#botao-Gest-outline {
    background-color: rgba(182, 162, 201, 0.658);
}

#botao-Voltar2 {
    font-size: 1.3rem;

}



    </style>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">

    <title>Tela inicial</title>

</head>

<body>

    <div class="container container-especial d-flex justify-content-center align-items-center" style="width: 90%; height:800px">
        <div class="container tamanho1 border rounded">
            <div class="row mt-3 mb-5">
                <nav class="navbar border rounded col-12 justify-content-center" id="nav-Gest">
                    <a class="navbar-brand" href="#">
                    <img width="40" height="40" class="d-inline-block align-top border" alt=""></a>
                </nav>
            </div>
            <div class="row justify-content-center">
                    <h2 class="text-center">Escolha a Opção</h2>
                    <div class="col-8 d-flex flex-column justify-content-center">
                        <a class="btn botao-maior" id="botao-Gest-outline"> A </a>
                        <a class="btn botao-maior" id="botao-Gest-outline"> B </a>
                        <a class="btn botao-maior" id="botao-Gest-outline"> C </a>
                   </div>
            </div>
            <div class="row border align-self-end mt-5">
                    <a class="btn " id="botao-Voltar2"><i class="fas fa-chevron-circle-left fa-2x"></i> </a>
                </div>
            </div>
    </div>


</body>

</html>
0
digolira2 29 may. 2021 a las 22:26

1 respuesta

La mejor respuesta

Para utilizar align-content y justify-content, el div tiene que tener display: flex aplicado. En realidad, necesita justify-content porque está intentando alinear elementos a lo largo de un eje horizontal (primario, x).

Aplicarlo también ha centrado el div con A, B, C (el primer fragmento). Si ese sea un problema, debe hacer algunos ajustes más (ver el segundo fragmento).

.container {
    background-color: white;
}

.container-especial{
    background-color: rgb(185, 185, 185) !important;
}

.tamanho1{
    background-color: white;
    margin-top:2rem;
    margin-bottom: 2rem;
    max-width: 90%;
    height: 95%;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nav-Gest {
    background-color: rgba(182, 162, 201, 0.658);
    color: white;
}

.botao-maior {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    text-align: center;
}


#botao-Gest-outline {
    background-color: rgba(182, 162, 201, 0.658);
}

#botao-Voltar2 {
    font-size: 1.3rem;

}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">

    <title>Tela inicial</title>

</head>

<body>

    <div class="container container-especial d-flex justify-content-center align-items-center" style="width: 90%; height:800px">
        <div class="container tamanho1 border rounded">
            <div class="row mt-3 mb-5">
                <nav class="navbar border rounded col-12 justify-content-center" id="nav-Gest">
                    <a class="navbar-brand" href="#">
                    <img width="40" height="40" class="d-inline-block align-top border" alt=""></a>
                </nav>
            </div>
            <div class="row justify-content-center">
                    <h2 class="text-center">Escolha a Opção</h2>
                    <div class="col-8 d-flex flex-column justify-content-center">
                        <a class="btn botao-maior" id="botao-Gest-outline"> A </a>
                        <a class="btn botao-maior" id="botao-Gest-outline"> B </a>
                        <a class="btn botao-maior" id="botao-Gest-outline"> C </a>
                   </div>
            </div>
            <div class="row border mt-5">
                    <a class="btn " id="botao-Voltar2"><i class="fas fa-chevron-circle-left fa-2x"></i> </a>
                </div>
            </div>
    </div>


</body>

</html>
.container {
    background-color: white;
}

.container-especial{
    background-color: rgb(185, 185, 185) !important;
}

.tamanho1{
    background-color: white;
    margin-top:2rem;
    margin-bottom: 2rem;
    max-width: 90%;
    height: 95%;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#nav-Gest {
    background-color: rgba(182, 162, 201, 0.658);
    color: white;
}

.botao-maior {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    text-align: center;
}


#botao-Gest-outline {
    background-color: rgba(182, 162, 201, 0.658);
}

#botao-Voltar2 {
    font-size: 1.3rem;

}

.content-container {
  flex: 1;
   display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: center;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">

    <title>Tela inicial</title>

</head>

<body>

    <div class="container container-especial d-flex justify-content-center align-items-center" style="width: 90%; height:800px">
        <div class="container tamanho1 border rounded">
            <div class="row mt-3 mb-5">
                <nav class="navbar border rounded col-12 justify-content-center" id="nav-Gest">
                    <a class="navbar-brand" href="#">
                    <img width="40" height="40" class="d-inline-block align-top border" alt=""></a>
                </nav>
            </div>
            <div class="row content-container">
                    <h2 class="text-center">Escolha a Opção</h2>
                    <div class="col-8 d-flex flex-column">
                        <a class="btn botao-maior" id="botao-Gest-outline"> A </a>
                        <a class="btn botao-maior" id="botao-Gest-outline"> B </a>
                        <a class="btn botao-maior" id="botao-Gest-outline"> C </a>
                   </div>
            </div>
            <div class="row border mt-5">
                    <a class="btn " id="botao-Voltar2"><i class="fas fa-chevron-circle-left fa-2x"></i> </a>
                </div>
            </div>
    </div>


</body>

</html>

También he eliminado el align-self-end desde el botón, ya que lo estaba obligando al lado derecho de la pantalla. No es realmente una solución de "bootstrap". Tal vez alguien con más experiencia de bootstrap tendrá una mejor idea.

... solo Nitpicking - El código de escritura en inglés hace que la vida de las personas que intenten ayudar.

1
Pan Vi 29 may. 2021 a las 20:21