0

Olá!
Usando o bootstrap, podem dizer como posso alinhar as divs ?(col-md-6) ?

porem na primeira metade, eu preciso dividir o grid em dois .

<div class="col-md-6">
    <div class="row">
        <div id="dados-devedor">
        
        </div>
        <div id="dados-contrato">
        </div>
    </div>
</div>
<div class="col-md-6">
     <div class="row">
        <div id="eventos">
       
        </div>
    </div>
</div>

inserir a descrição da imagem aqui

1 Resposta 1

1

Um detalhe, col- sempre deve ser filho de row!

<!--//CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
.shc {
    /*remove a margem das colunas e row*/
    margin: 0;
    padding: 0;
}

/*fixa altura dos elementos que dividem o espaço*/
#dados-devedor, #dados-contrato {
    height: 250px;
}

#dados-devedor {
    background-color: #f00;
}
#dados-contrato {
    background-color: #00f;
}
#eventos {
    background-color: #0f0;
    height: 500px; /*fixa altura do elemento que fica direita*/
}
</style>

<div class="row shc">

    <div class="col-md-6 shc">
        <div id="dados-devedor">
        devedor
        </div>
        <div id="dados-contrato">
        contrato
        </div>
    </div>

    <div class="col-md-6 shc">
        <div id="eventos">
        Eventos
        </div>
    </div>

</div>

Flex com CSS

Claro que usar da maneira que mostrei deixa o tamanho fixo, se deseja usar tamanhos dinâmicos que acompanham você pode usar flex, veja um exemplo bem semelhante ao que você deseja:

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 .