Bootstrap combinant des lignes (rowspan)

Je teste Twitter Bootstrap et je suis coincé avec un échafaudage de base avec des lignes. J'ai revisité leur documentation un certain nombre de fois et je peux voir des colonnes d'imbrication où vous pouvez essentiellement imbriquer des colonnes dans une colonne, mais je ne peux pas localiser la capacité de combiner des lignes en une seule et de l'aligner avec la colonne à côté des lignes non combinées.

L'image ci-dessous doit illustrer ce que je veux accomplir.

La seule solution de contournement que j'ai rencontrée est l'utilisation de tables, mais je n'aime pas cette idée car je pense que la réactivité ne fonctionnerait pas avec l'utilisation de tables.

Quelqu'un at-il une solution élégante à cela? La plupart de la mise en page Web que je fais aura besoin d'un bon niveau de flexibilité, donc ce sera formidable si je pouvais trouver quelque chose d'utile ici.

Les divs s'empilent verticalement par défaut, il n'est donc pas nécessaire de gérer spécialement les "lignes" dans une colonne.

div {
  height:50px;
}
.short-div {
  height:25px;
}

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

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Voici le violon .

Vous devez utiliser l'imbrication de colonnes bootstrap.

Voir Bootstrap 3 ou Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(Dans l'écran Fiddle, agrandissez votre écran de test pour voir le résultat, car j'utilise col- md - *, puis les colonnes responsive stacks)

Remarque : je ne suis pas sûr que BS2 autorise l' imbrication de colonnes , mais dans la réponse de Paul Keister, l'imbrication de colonnes n'est pas utilisée. Vous devez l'utiliser et éviter de réinventer le CSS pendant que le bootstrap fonctionne bien.

La hauteur des colonnes est auto, si vous ajoutez une deuxième ligne (comme je le fais dans mon exemple), la hauteur des colonnes s'adapte.

Remarque: C'était pour Bootstrap 2 (pertinent lorsque la question a été posée).

Vous pouvez accomplir cela en utilisant row-fluidpour créer une ligne basée sur un fluide (pourcentage) dans un fichier existant block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Voici un exemple JSFiddle .

J'ai remarqué qu'il y avait une marge gauche étrange qui apparaît (ou n'apparaît pas) pour les travées à l'intérieur de la row-fluidaprès la première. Cela peut être corrigé avec un petit tweak CSS (c'est le même CSS qui est appliqué au premier enfant, étendu à ceux après le premier enfant):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Vérifier celui-ci. j'espère que cela vous aidera pleinement.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

La réponse de Paul semble aller à l'encontre du but du bootstrap; celle d'être sensible à la taille de la fenêtre / de l'écran.

En imbriquant des lignes et des colonnes, vous pouvez obtenir le même résultat, tout en conservant la réactivité.

Voici une réponse à jour à ce problème;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Vous pouvez voir le codepen ici.