Comment puis-je obtenir une colonne Bootstrap pour couvrir plusieurs lignes?

158

J'essaie de comprendre comment faire la grille suivante avec Bootstrap.

Je ne sais pas comment je créerais la boîte (numéro 1) qui s'étend sur deux lignes. Les boîtes sont générées par programme dans l'ordre dans lequel elles sont disposées. La case 1 est un message de bienvenue.

entrez la description de l'image ici

Des idées sur la meilleure façon de procéder?

css twitter-bootstrap James Jeffery
la source
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , Vous pouvez imbriquer le système de grille Bootstrap.
TheHippo
1
Créez donc 2 lignes, plutôt que 3, en imbriquant les 2 lignes dans la première ligne? Cela peut être problématique lorsque les boîtes sont générées par programme.
James Jeffery
1
Aucune idée si cela fonctionnerait, mais est-ce que l'ajout de la pull-leftclasse à toutes les boîtes fonctionnerait? cela ne fera pas de la boîte 1 la même hauteur que 2 + 4, mais cela devrait lui permettre de fonctionner lorsque vous définissez la hauteur.
Hailwood
Hailwood, mets ça comme réponse si tu peux, sinon je vais coller mon code. Cela a fonctionné ... au moins sur Chrome. Besoin de le tester dans d'autres navigateurs.
James Jeffery
@Hailwood en fait, aucune traction à gauche n'est nécessaire. Il suffit de définir une hauteur sur le premier élément.
James Jeffery

Réponses:

164

Pour 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>
Développer l'extrait

Pour Bootstrap 2:

Afficher l'extrait de code

Voir la démo sur JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

Mastergalen
la source
Comment feriez-vous pour que les cases 4 et 5 remplissent la hauteur de la ligne à mesure que la case 1 grandit?
Imran NZ
2
stackoverflow.com/questions/19695784/…
Mastergalen
Cet exemple ne fonctionne pas tout à fait, le bord inférieur de la première colonne est légèrement désaligné avec le reste.
JackKalish
C'est une excellente réponse, mais que se passe-t-il si la case 5 devait également s'étendre à la ligne 3, et plus encore, de manière dynamique?
Misha'el
@ Misha'el C'est assez simple, il suffit de faire ce qu'il a fait pour la case 1 et de l'appliquer à la case 3/5. Il devrait y avoir 3 colonnes de taille égale, celle de l'extérieur ne contiendrait qu'une seule ligne, celle de l'intérieur deux lignes.
Nathan Williams
17

Comme le suggèrent les commentaires, la solution consiste à utiliser des travées / lignes imbriquées.

<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>
perturbateur
la source
1

L'exemple ci-dessous semble fonctionner. Il suffit de définir une hauteur sur le premier élément

<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>

Je ne peux pas m'empêcher de penser que c'est une mauvaise utilisation d'une ligne.

James Jeffery
la source
1

Je crois que la partie concernant la façon d'étendre les lignes a reçu une réponse approfondie (c'est-à-dire en imbriquant des lignes), mais j'ai également rencontré le problème de mes lignes imbriquées ne remplissant pas leur conteneur. Bien que la flexbox et les marges négatives soient une option, une solution beaucoup plus simple consiste à utiliser la h-50classe prédéfinie sur les rowboîtes contenant 2, 3, 4 et 5.

Remarque: j'utilise Bootstrap-4, je voulais juste partager car j'ai rencontré le même problème et j'ai trouvé que c'était une solution plus élégante :)

Shareef Hadid
la source
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
la source