Bootstrap combinant des lignes (rowspan)

Je teste Twitter Bootstrap et je me suis retrouvé avec des échafaudages de base avec des lignes. J’ai revu leur nombre de documents et je peux voir des colonnes nestedes dans lesquelles vous pouvez imbriquer des colonnes dans une colonne, mais je ne peux pas trouver la possibilité de combiner des lignes en une colonne et la placer à côté des lignes non combinées.

L’image ci-dessous devrait illustrer ce que je veux accomplir.

exemple de disposition des rangs

La seule solution de contournement que j’ai trouvé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 des tables.

Quelqu’un at-il une solution élégante à cela? La majeure partie de la mise en page Web demandée nécessitera un niveau de flexibilité élevé, donc ce serait bien si je pouvais choisir quelque chose d’utile ici.

Les divs s’emstacknt verticalement par défaut, il n’y a donc pas besoin de traitement spécial des “lignes” dans une colonne.

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

Responsive Bootstrap

Span 5
Span 3
Span 2
Span 2
Span 2
Span 6
Span 6
Span 6

Vous devez utiliser l’imbrication de la colonne bootstrap.

Voir Bootstrap 3 ou Bootstrap 4 :

 
Span 5
Span 3
second line
Span 2
Span 2
Span 2
Span 6
Span 6
Span 6

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 de stacks réactives)

Note : Je ne suis pas sûr que BS2 autorise l’ imbrication des colonnes , mais dans la réponse de Paul Keister, l’imbrication des colonnes n’est pas utilisée. Vous devriez l’utiliser et éviter de réinventer le css alors que le bootstrap fonctionne bien.

La hauteur des colonnes est automatique, si vous ajoutez une deuxième ligne (comme dans mon exemple), la hauteur de la colonne s’adapte.

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

Pour ce faire, vous devez utiliser un fluide en row-fluid pour créer une ligne fluide (en pourcentage) dans un block existant.

 
span5
span3
span2
span2
span2
span6
span6
span6

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 du row-fluid après le premier. Cela peut être corrigé avec un petit tweak CSS (c’est le même CSS qui est appliqué au premier enfant, étendu à ceux du premier enfant):

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

Vérifier celui-ci. J’espère que cela vous aidera.

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 vaincre le but du bootstrap; celle d’être sensible à la taille de la fenêtre d’affichage / é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.

 

Responsive Nested Bootstrap

Span 5
Span 3
Span 2
Span 2
Span 2
Span 6
Span 6
Span 6