web-dev-qa-db-fra.com

Bootstrap combinant des lignes (rowspan)

Je teste Twitter Bootstrap et me suis retrouvé coincé avec un échafaudage de base avec des rangées. J'ai revisité leur documentation plusieurs fois et je peux voir des colonnes imbriquées dans lesquelles vous pouvez imbriquer des colonnes dans une colonne, mais je ne peux pas localiser la possibilité de combiner des lignes dans une colonne et l'aligner avec la colonne à côté des lignes non combinées.

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

rowspan layout sample

La seule solution que j'ai trouvée consiste à utiliser des tableaux, mais je n’aime pas cette idée, car j’estime que la réactivité ne fonctionnerait pas avec l’utilisation des tableaux.

Quelqu'un a-t-il une solution élégante à cela? La plupart de ma mise en page Web nécessitera une grande flexibilité. Ce serait donc formidable de pouvoir trouver quelque chose d’utile ici.

twitter-bootstrapbootstrap-grid
113
Seong Lee

Les divisions s'empilent 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;
}
<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 .

94
Paul Keister

Vous devez utiliser bootstrap imbrication de colonne.

Voir Bootstrap 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 colonnes de piles réactives)

Remarque : Je ne suis pas sûr que BS2 autorise l'imbrication des colonnes , mais Pour répondre à la question de Paul Keister, l’imbrication des colonnes n’est pas utilisée. Vous devriez l'utiliser et éviter de réinventer le CSS pendant que bootstrap réussit bien.

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

72
Alcalyn

Remarque: Il s’agissait de Bootstrap 2 (pertinent lorsque la question a été posée).

Vous pouvez y parvenir en utilisant row-fluid pour créer une ligne basée sur un fluide (en pourcentage) à l'intérieur d'une block existante.

<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'il y avait une marge gauche étrange qui apparaît (ou n'apparaît pas) pour les étendues à l'intérieur du row-fluid après le premier. Cela peut être corrigé avec un petit CSS Tweak (c'est le même CSS que celui appliqué au premier enfant, étendu à ceux du passé):

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

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

La réponse de Paul semble aller à l'encontre du but du bootstrap; celle d'être sensible à la taille de la fenêtre d'affichage/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 afficher le code ici.

1
vasavest
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>
0
SUDIP SINGH