-2
votes

Comment réparer la hauteur et la largeur de la colonne à l'aide de CSS

Je développe un site Web de commerce électronique où tous les produits sont affichés dans la même page de "Cols" Le problème est que je ne pouvais pas réparer la largeur du col ou la hauteur à l'aide de CSS

p>

   

.side-body {
  margin-left: 310px;}
   
.right {
  float: right;
  border-bottom: 2px solid #4b8e4b;
}

.thumbnail {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.thumbnail:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px #41d834;
}
.line {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .col-equal {
    margin: auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
  }
}


6 commentaires

Que voulez-vous dire avec "correction"? Que veux-tu accomplir?


Pouvez-vous créer la petite démo sur Stackblitz?


Quel est l'objectif final?


Ensemble max-hauteur et max-largeur sur .Thumbnail


Duplicaté possible de Comment puis-je fabriquer des colonnes de bootstrap tous les mêmes Hauteur?


Problème résolu merci merci


5 Réponses :


1
votes

Essayez de définir une hauteur mineure sur le texteblok sous l'image (description) Je pense que cela résoudra votre problème


0 commentaires

1
votes

semble que vous ajoutez tout à l'intérieur, vous devez donc rendre l'étiquette de l'étoupe en tant qu'élément de bloc ou de bloc en ligne

Utilisation: p>

.thumbnail{
display:inline-block;
width:your-width-value;
height:your-height-value;
}


0 commentaires

2
votes

Essayez de donner min-hauteur à H4, de sorte que toutes les descriptions des produits auront la même hauteur.


2 commentaires

Pouvez-vous nous montrer ce que vous avez essayé? Nous pouvons donc vous aider à mieux vous aider.


Si j'ai un texte long dans h4 cela fonctionnera-t-il si le texte enveloppe à la ligne suivante?



0
votes

bootstrap a .row-eq-hauteur code> pour régler la hauteur égale sur toutes les colonnes d'une ligne. Cependant, il n'est pas pris en charge par Internet Explorer.

<div class="container">
  <div class="row row-eq-height">


0 commentaires

0
votes

Pour moi, il semble que vous n'utilisez pas de bootstrap v4, mais en fait v3.

bootstrap v3 utilise float: gauche , tandis que bootstrap v4 utilise Affichage: flex

Codepen.io/herrserker/pen/xmyyom utilise Bootstrap v3 (avec le problème) de
CODEPEN.IO/HERRSERKER/PEN/VBVQYO utilise BOOTSTRAP V4 (sans le numéro)


0 commentaires