Affectation de hauteurs en pourcentage aux lignes Bootstrap

Question

Comment affecter une height de 15% à une ligne BootStrap?

Cela ne semble fonctionner pour moi que si j'attribue une hauteur de 15px, sinon je me retrouve avec une hauteur de 0.

Answer 1

Si vous voulez dire 15% de la hauteur de page à affecter à la ligne, vous pouvez utiliser les unités de fenêtre.

.my-row { 
    height: 15vh; 
} 

Cela signifie que votre hauteur de ligne est de 15% de la hauteur de la page.

Answer 2

Si vous utilisez un pourcentage basé height sur un élément, vous doit ont une hauteur fixe sur l'un des parents de l'élément.

Si l'élément à hauteur fixe est le parent immédiat, vous n'avez besoin que d'une hauteur en pourcentage sur l'élément cible.

Si la hauteur fixe est un élément qui est plus élevé dans les DOM que le parent immédiat , vous devez spécifier une hauteur en fonction de pourcentage pour chaque élément entre l'élément cible et le fixe élément de hauteur.

Voici un exemple de travail, en utilisant le parent immédiat .container:

.container { 
 
    border: 1px solid black; 
 
    height: 200px; 
 
} 
 

 
.row { 
 
    background: red; 
 
    height: 20px; 
 
} 
 

 
.row:nth-of-type(2n) { 
 
    background: blue; 
 
    height: 80%; /* corresponds to 160px, because 160 is 80% of 200 */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

Hope this helps! :)