1

Estou com uma dúvida referente ao Sistema de Grid do Bootstrap, é válido usar uma .row dentro de um elemento com classe .col-x-y caso eu queira criar mais de uma coluna dentro dessa .col-x-y?

Resumindo, é uma boa prática ou não utilizar .row dentro de .col?

1 Resposta 1

2

Sim você pode fazer dessa maneira. Inclusive existe um exemplo disso na documentação oficial como vc pode ver aqui: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Essa técnica se chama Nesting Grid

Veja o exemplo completo abaixo:

.row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />

<div class="row">
    <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
        <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
        </div>
        </div>
    </div>
</div>

4
  • Nossa, li a documentação do bootstrap encontrando por exemplo assim e esse me passou batido. Muito obrigado! Commented 18/04/2018 às 13:29
  • 1
    @RodrigoFontes sem problemas meu jovem a documentação é extensa mesmo, mas lembre-se sempre do conceito de aninhamento "Nesting" ele é recorrente em vários framworks. tmj
    – hugocsl
    Commented 18/04/2018 às 13:30
  • Uma última dúvida, sempre que eu criar .cols dentro de uma .col eu tenho que utilizar a .row como no exemplo acima ou cada caso é um caso, pois tem a questão do espaçamento também? Commented 18/04/2018 às 13:32
  • 1
    Por regra geral SIM, pois a .row tem margens a direita e a esquerda, já a .col tem padding a direita e a esquerda, a grosso modo um abate o valor do outro e fica alinhado, porém o conteúdo interno da .col não toca na borda da .row. No comentário é dificil de explica, mas usando puramente uma .col dentro de outra .col vc pode gerar um padding indesejado dentro da .col que está dentro da outra... É complicado explicar com poucas palavras rss. Mas se quiser abre outra pergunta que eu te dou mais detalhes e exemplos.
    – hugocsl
    Commented 18/04/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 .