2

estou fazendo uma grid em boostrap, e não consigo deixar corretamente alinhado verticalmente.

Deveria ficar sempre assim:

*-------------*     *--------------*    *--------------*
| card grande |     | card Pequeno |    | card Pequeno |
*-------------*     *--------------*    *--------------*
|             |     |     dois     |    |     quatro   |
|             |     *--------------*    *--------------*
|     UM      |
|             |
|             |
|             |
|             |  
|             |     *--------------*    *--------------*
|             |     | card Pequeno |    | card Pequeno |
|             |     *--------------*    *--------------*
|             |     |     tres     |    |     cinco    |
*-------------*     *--------------*    *--------------*

Veja que os cards tres e cinco, deveriam estar alinhados com a base do card um, porém eles estão ficando assim:

*-------------*     *--------------*    *--------------*
| card grande |     | card Pequeno |    | card Pequeno |
*-------------*     *--------------*    *--------------*
|             |     |     dois     |    |     quatro   |
|             |     *--------------*    *--------------*
|     UM      |  
|             |     *--------------*    *--------------*
|             |     | card Pequeno |    | card Pequeno |
|             |     *--------------*    *--------------*
|             |     |     tres     |    |     cinco    |
|             |     *--------------*    *--------------*
|             |
|             | 
|             |
*-------------*

como os card tres e cinco, logo abaixo dos dois e quatro.

Aqui esta um exemplo de como estou fazendo agora

2 Respostas 2

3

Cara nem precisa de CSS além das classes nativas do Bootstrap. Vc pode usar as classes Flex do framework para ajustar isso. Consulte aqui https://getbootstrap.com/docs/4.1/utilities/flex/

Repare que primeiro vc precisa colocar a .row com 100% de altura do pai, para isso use a classe h-100, depois vc alinha os filhos da parte de baixo com align-self-end para eles ficarem na base da col

Veja como fica

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <div class="row">

        <div class="col-6">
            a
            <br />

            <br />
            <br />
            <br />
            <br />
            <br />
            final
        </div>

        <div class="col-6">
            <div class="row h-100">
                <div class="col-6">
                    b
                </div>

                <div class="col-6">
                    c
                </div>

                <div class="col-6 align-self-end">
                    d
                </div>

                <div class="col-6 align-self-end">
                    e
                </div>
            </div>
        </div>

    </div>

Código Funcioando.

3
  • 1
    Funcionou perfeitamente. vou marcar como respondido. Commented 6/11/2018 às 14:00
  • @AlexandreQueiroz legal que deu certo ai. A boa prática já que vc está usando o Framework é que vc Realmente use as classes nativas dele, evite jeitinhos com CSS customizados, pois isso pode te trazer problemas no futuro, principalmente com o grid e a responsividade... Boa sorte ai!
    – hugocsl
    Commented 6/11/2018 às 14:07
  • @AlexandreQueiroz Se a minha resposta te ajudou de alguma forma considere marca-la como aceita nesse ai ao lado esquerdo perto das setinhas. Basta clicar nele e a pergunta fica marcada como resolvida e com resposta aceita :)
    – hugocsl
    Commented 9/11/2018 às 17:02
2

Uma sugestao:

<div class="container bottom-align-div">
      <div class="row">
        <div class="col-6">
            d
        </div>
        <div class="col-6">
            e
        </div>
    </div>
  </div>

CSS:

.bottom-align-div {
  position: absolute;
  bottom: 0;
  }

FIDDLE: https://jsfiddle.net/x0ko7tmq/

6
  • Aqui não funcionou seu código, o position : absolut; quebra o sistema de colunas.
    – Renan
    Commented 6/11/2018 às 13:25
  • coloquei no fiddle. O trecho que voce postou pra mim funcionou... será q outra parte do seu codigo está sendo afetado ou interferindo?
    – Eloa
    Commented 6/11/2018 às 13:27
  • não foi eu que fez a pergunta hahah, mas eu fiz um teste aqui e não deu, vou tentar novamente
    – Renan
    Commented 6/11/2018 às 13:30
  • Achei a diferença do seu código pro meu, é q você colocou a class container. funcionou.
    – Renan
    Commented 6/11/2018 às 13:33
  • hahahah foi mal nao tinha visto que nao era o autor ;)
    – Eloa
    Commented 6/11/2018 às 13:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .