Bootstrap combinant les rangées (rowspan)

Question

Je teste Twitter Bootstrap et s'est retrouvé coincé avec échafaudage de base avec des rangées. J'ai revu leur documentation un certain nombre de fois et je peux voir des colonnes imbriquées où vous pouvez essentiellement imbriquer des colonnes à l'intérieur d'une colonne mais je ne peux pas localiser la possibilité de combiner des rangées en une seule et de l'aligner avec la colonne à côté des rangées non combinées.

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

La seule solution de contournement que j'ai trouvée consiste à utiliser des tableaux, mais je n'aime pas cette idée. car je pense que la réactivité ne serait pas assurée par l'utilisation de tableaux.

Quelqu'un a-t-il une solution élégante à ce problème ? La plupart des mises en page web que je réalise nécessitent un bon niveau de flexibilité. Ce serait donc formidable si je pouvais trouver quelque chose d'utile ici.

Answer 1

Les Divs s'empilent verticalement par défaut, il n'est donc pas nécessaire de traiter spécialement les "rangées" 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>

Sortie :

Voici le violon .

Answer 2

Vous devez utiliser l'imbrication des colonnes de bootstrap.

Voir Bootstrap 3 o 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 des col- md -*, puis colonnes de piles réactives)

Nota : Je ne suis pas sûr que BS2 permette emboîtement des colonnes mais dans la réponse de Paul Keister, l'imbrication des colonnes n'est pas utilisée. Il faut l'utiliser et éviter de réinventer le css alors que bootstrap le fait bien.

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

Answer 3

Remarque : il s'agissait de Bootstrap 2 (pertinent au moment où la question a été posée).

Vous pouvez y parvenir en utilisant row-fluid pour créer une rangée basée sur le fluide (pourcentage) à l'intérieur d'une rangée existante. 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 de JSFiddle .

J'ai remarqué qu'une marge gauche étrange apparaissait (ou n'apparaissait pas) pour les travées à l'intérieur de l'élément row-fluid après le premier. Cela peut être corrigé avec une petite modification CSS (c'est la même CSS qui est appliquée au premier enfant, étendue à ceux après le premier enfant) :

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

Answer 4

Vérifiez celui-ci. J'espère qu'il 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;}

Answer 5

De ce que je sais de Bootstrap et de ce qui le rend agréable, c'est que vous n'avez pas à vous soucier du code css/js/jquery fastidieux, tout est construit pour vous, ceci étant dit, essayez de manipuler le css de la ligne. Lorsqu'il y a deux définitions css, la dernière est prioritaire, donc injectez-la à la source de la ligne, puisque ce sera la dernière, et en plus, elle ne perturbera pas les autres définitions css.