Comment puis-je ajouter une longue colonne à la fin d'un ensemble de lignes dans Bootstrap?

Question

Ceci est probablement une question simple, mais cela me cause des problèmes.

Si j'ai trois lignes, comment puis-je ajouter une colonne indépendante qui couvre la hauteur des trois lignes vers la droite? .: par exemple

[Row 1]    [Desired column] 
    [col-xs-1]   .............. 
    [col-xs-11]   .............. 
[Row 2]    .............. 
    [col-xs-1]   .............. 
    [col-xs-11]   .............. 
[Row 3]    .............. 
    [col-xs-1]   .............. 
    [col-xs-11]   [end here] 

Comment puis-je faire les lignes « end » pour que je puisse ajouter une colonne indépendante d'entre eux qui couvre toute la hauteur à droite?

Answer 1

Voulez-vous quelque chose comme ça? Vous pouvez utiliser la classe .row-eq-height, la classe CSS est la suivante.

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
} 

div { 
 
    border: 1px solid black; 
 
} 
 

 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row row-eq-height"> 
 
    <div class="col-xs-8"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"> 
 
      adfs 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      asdf 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      asdf 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-4"> 
 
      asdf 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      asdf 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      asdf 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4" style="background-color:red;"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

Vous pouvez simplement faire ceci est html, dans votre définition de table, utilisez rowspan.

EG-

<table> 
<thead> 
    <tr> 
    <th>first</th> 
    <th rowspan="3">last</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>first row</td> 

    </tr> 
    <tr> 
    <td>second row</td> 

    </tr> 
    <tr> 
    <td>third row</td> 
    </tr> 
</tbody> 
</table>