Comment créez-vous des grilles impaires dans Bootstrap 4?

Question

Comment créez-vous des grilles impaires dans Bootstrap 4? Par exemple,

La colonne de gauche s'étend sur deux lignes, et à ses deux lignes droite ayant chacun 3 colums

|||||||||||||||| 
|  | | | | 
|  |_ |_ |_ | 
|  | | | | 
|_____|_ |_ |_ | 

Answer 1

Lorsque vous utilisez des grilles de Bootstrap, vous devriez penser à la mise en page des colonnes au lieu de la mise en page les rangées. La disposition des colonnes dépend de la hauteur du contenu à l'intérieur des cellules.

Pour démontrer une rangée qui couvre deux colonnes I ont fixé la hauteur des lignes

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col col-md-6"> 
     <div style="height: 400px; background-color: rgb(26, 188, 156);"></div> 
     </div> 
     <div class="col col-md-6"> 
     <div class="row"> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(52, 152, 219);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(231, 76, 60);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(52, 73, 94);"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(22, 160, 133);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(230, 126, 34);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(149, 165, 166);"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>