Como posso obter uma coluna Bootstrap para abranger várias linhas?

158

Estou tentando descobrir como fazer a seguinte grade com o Bootstrap.

Não sei como criaria a caixa (número 1) que se estende por duas linhas. As caixas são geradas programaticamente na ordem em que são dispostas. A caixa 1 é uma mensagem de boas-vindas.

insira a descrição da imagem aqui

Alguma idéia sobre o melhor caminho a seguir?

css twitter-bootstrap James Jeffery
fonte
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , você pode aninhar o sistema de grade do Bootstrap.
TheHippo
1
Então, crie 2 linhas, em vez de 3, aninhando as 2 linhas na primeira linha? Isso pode ser problemático quando as caixas são geradas programaticamente.
James Jeffery
1
Não faço ideia se funcionaria, mas adicionar a pull-leftclasse a todas as caixas funcionaria? não fará com que a caixa 1 tenha a mesma altura que 2 + 4, mas deverá permitir que ela funcione quando você definir a altura.
Hailwood #
Hailwood, coloque isso como resposta, se puder, se não, vou colar meu código. Funcionou ... pelo menos no Chrome. Precisa testá-lo em outros navegadores.
James Jeffery
@Hailwood de fato, não é necessário puxar para a esquerda. Apenas definir uma altura no primeiro elemento funciona.
James Jeffery

Respostas:

164

Para o Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Expandir snippet

Para o Bootstrap 2:

Mostrar snippet de código

Veja a demonstração no JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

Mastergalen
fonte
Como você faria as caixas quatro e cinco preencherem a altura da linha à medida que a caixa um cresce?
Imran NZ
2
stackoverflow.com/questions/19695784/…
Mastergalen 20/10/2015
Este exemplo não funciona muito bem, a borda inferior da primeira coluna está ligeiramente desalinhada com o restante.
21416 JackKalish
Essa é uma ótima resposta, mas e se a caixa 5 também precisasse estender para a linha 3 e, mais ainda, dinamicamente?
Misha'el
@ Misha'el Isso é bem simples, basta fazer o que ele fez na caixa 1 e aplicá-lo na caixa 3/5. Deve haver 3 colunas de tamanho igual, a do lado de fora conteria apenas 1 linha, a do lado de dentro de duas linhas.
Nathan Williams
17

Como os comentários sugerem, a solução é usar extensões / linhas aninhadas.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
disrvptor
fonte
1

O exemplo abaixo parecia funcionar. Apenas definindo uma altura no primeiro elemento

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Não posso deixar de pensar que é o uso errado de uma linha.

James Jeffery
fonte
1

Acredito que a parte sobre como estender linhas tenha sido respondida minuciosamente (ou seja, aninhando linhas), mas também deparei-me com o problema de minhas linhas aninhadas não preencherem o contêiner. Embora flexbox e margens negativas sejam uma opção, uma solução muito mais fácil é usar a h-50classe predefinida nas rowcaixas 2, 3, 4 e 5.

Nota: Estou usando Bootstrap-4, eu só queria compartilhar porque encontrei o mesmo problema e achei a solução mais elegante :)

Shareef Hadid
fonte
0 
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
Ps Naidu
fonte