Bootstrap combinant des lignes (rowspan)


128

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.

exemple de disposition rowspan

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.

Réponses:


99

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 .


2
Merci beaucoup. C'est ce que je cherchais! Je souhaite que la documentation Bootstrap mentionne cela en plus sous les colonnes d'imbrication car l'approche est fondamentalement la même.
Seong Lee

1
dans votre exemple , vous définissez 1row=25px, 2row=50px. pouvez-vous faire en sorte que le div étendu soit aussi haut que la ligne entière? essayé d'ajouter .row{height:100%;}mais ça n'a pas marché.
Tomer W

Oui, @carter l'exemple d'origine n'était pas compatible avec bootstrap 3; Je l'ai corrigé.
Paul Keister

1
L'exemple a des gouttières sur la deuxième rangée qui semblent étranges.
Connie DeCinko

84

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.


10
Cela devrait être la réponse acceptée car cela fonctionne avec Bootstrap
prêt à l'emploi

La réponse acceptée est plus lisible; il contient un extrait de code et un lien vers JSfiddle et les exemples de Paul Keister IMHO sont plus clairs que ceux d'Alcalyn. C'est pourquoi je pense que celle de Paul Keister devrait être conservée comme réponse acceptée, du moins jusqu'à ce que la réponse d'Alcalyn soit améliorée.
naXa

1
@Alcalyn dans mon navigateur (Chrome) le violon lié de votre réponse ne produit pas le résultat attendu (voir image dans la question). Le résultat réel est tous les div alignés dans une colonne.
naXa

1
Si vous voyez une seule colonne avec toutes les étendues alignées, c'est parce que la -md-règle responsive. Vous devez agrandir votre écran pour voir le résultat attendu. Si vous souhaitez que vos travées s'affichent sous forme de colonnes sur des écrans plus petits, remplacez-les -md-par -sm-ou -xs-. Ceci est une question de point d'arrêt (voir bootstrapdocs.com/v3.0.3/docs/css/#grid ).
Alcalyn

12

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

Merci pour vos efforts, mais il semble qu'une ligne n'ait pas besoin d'utiliser row-fluid pour accomplir cela, comme suggéré par ma réponse sélectionnée. J'apprécie vraiment ça!
Seong Lee

1
Très vrai, mais n'oubliez pas row-fluidquand vient le temps de commencer à subdiviser les lignes intérieures.
pickypg

7

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

1

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.


0

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>


Cela ne fonctionne pas pour moi avec <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- color: yellow; "> <input type =" file "id =" imgInp "name =" img "accept =". png, .jpg, .jpeg "> <! - <input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </input> -> <img id =" img-upload "src =" "alt =" Transporter "width =" 300% " height = "50%" class = "round-circle" /> </div> </div> </div>
SUDIP SINGH

2
Veuillez ajouter une explication autour de votre code. Afin que OP et futur lecteur puissent facilement comprendre votre réponse.
Sangam Belose
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.