Je veux diviser l'écran en six parties avec bootstrap comme la forme ci-dessous

What I want

0
behzad razzaqi 16 janv. 2017 à 13:06

2 réponses

Meilleure réponse

Vous pouvez utiliser l'unité css vh pour spécifier la hauteur de la fenêtre pour chaque colonne.

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
    <div class="col-sm-6">3</div>
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
    <div class="col-sm-6">6</div>
  </div>
</div>

CSS:

@media (min-width: 768px) {
  .col-sm-6 {
    height: 33.33vh;
  }
}
.container-fluid .col-sm-6 {
  border: 1px solid black;
  background: green;
  height: 100vh;
  color: white;
}
@media (min-width: 768px) {
  .container-fluid .col-sm-6 {
      height: 33.33vh;  
  } 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
    <div class="col-sm-6">3</div>
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
    <div class="col-sm-6">6</div>
  </div>
</div>
1
Mohammad Usman 16 janv. 2017 à 10:51
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
  </div>
 </div>

Vous pouvez utiliser des classes de bootstrap Twitter comme celle-ci et donner à chaque div la même hauteur.

.sameHeight{
  height:30px;
}
1
talentedandrew 16 janv. 2017 à 10:14