Linhas aninhadas com sistema de grade de autoinicialização?

196

Quero 1 imagem maior com 4 imagens menores em um formato 2x2 como este:

Figura 1 Exemplo

Meu pensamento inicial era abrigar tudo em uma linha. Em seguida, crie duas colunas e, na segunda coluna, crie duas linhas e duas colunas para criar o efeito 1x1 e 2x2.

No entanto, isso não parece ser possível, ou simplesmente não estou fazendo isso corretamente?

— Greg
fonte

Poste o HTML / CSS que você tentou até agora.

— 9788 Steve Sanders

Tente o seguinte: jsfiddle.net/KXje2/9 Editei meu violino para acomodar telas grandes e extras.

— BuddhistBeast

Fez o trabalho de código acima para você ...?

— BuddhistBeast

299

Bootstrap versão 3.x

Como sempre, leia a excelente documentação do Bootstrap:

Documentos do 3.x : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Verifique se a linha no nível pai está dentro de um .containerelemento. Sempre que você desejar aninhar linhas, basta abrir uma nova parte .rowinterna da sua coluna.

Aqui está um layout simples para trabalhar:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap Versão 4.0

4.0 Documentos : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Aqui está uma versão atualizada para 4.0, mas você realmente deve ler a seção de documentos inteiros na grade para entender como aproveitar esse recurso poderoso

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Demonstração no Fiddle jsFiddle 3.x |jsFiddle 4.0

Que ficará assim ( com um pouco de estilo adicional ):

captura de tela

— KyleMit
fonte

desculpe a seqüestrar um fio de 1 ano de idade, mas você sabe como chegar 0px entre imagem e 1 e 3

— alex

@alex, com certeza - basta definir margin: 0;o .mini-boxelemento. Meu exemplo foi apenas adicionar um para maior clareza, mas você pode remover a linha completamente. Aqui está uma demonstração

— KyleMit

por que não há linha entre col para minibox 2 e col para minibox 3? e o que acontecerá se houver?

— Pashute

@ pashute, consulte Bootstrap 3 grid, isso realmente importa quantas colunas estão seguidas? . Cada minicaixa ocupa 50% do espaço disponível (restringido pela coluna); portanto, dois ocupam a primeira linha. Quaisquer outros extras serão agrupados em uma nova linha. Você também pode emparelhar cada um deles em linhas, mas não precisa. Por padrão, o Bootstrap é agrupado para que você não precise desorganizar sua marcação com novas linhas. Se for semanticamente significativo, eu diria que vá em frente. Mas se você estiver apenas exibindo uma lista de 4 objetos, mantenha-os na mesma linha.

— precisa saber é o seguinte

@ user3921890, é um tópico muito grande para responder em uma linha de comentário. Você pode postar um novo tópico explicando o que você está tentando fazer e pelo menos uma tentativa de fazê-lo, e depois vincular aqui.

— precisa saber é o seguinte

Além do que o @KyleMit disse, considere usar:

col-md-* classes para as colunas externas maiores
col-xs-* classes para as colunas internas menores

Isso será útil quando você visualizar a página em diferentes tamanhos de tela.

Em uma tela pequena, o agrupamento de colunas externas maiores ocorrerá, mantendo as colunas internas menores, se possível

— ezzadeen
fonte