jquery-match-hauteur ne fonctionne pas sur la première ligne
Im en utilisant jquery-match-hauteur plugin sur mon site.
Je ne comprends pas pourquoi le plugin ne fonctionne pas sur la première ligne. Il semble que le plugin est en essayant de sortie le style de la hauteur, mais il est vide sur la première ligne. Deuxième ligne fonctionne bien.
html
<div class="container">
<div class="row article-box-list">
<div class="col-xs-12 col-md-8 article-box">
<a href="#"><img src="http://dummyimage.com/768x410/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h2><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
</div>
</div>
<div class="col-xs-12 col-md-4 article-box">
<a href="#"><img src="http://dummyimage.com/768x853/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
</div>
</div>
</div><!-- /first-row-->
<div class="row article-box-list">
<div class="col-xs-12 col-md-4 article-box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">More</a></p>
</div>
</div>
<div class="col-xs-12 col-md-4 article-box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p class="ingress">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#">More</a></p>
</div>
</div>
<div class="col-xs-12 col-md-4 article-box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet, consectetuer. <a href="#">More</a></p>
</div>
</div>
</div><!--/last-row-->
</div>
js
$(function() {
$('.article-box .well').matchHeight();
});
Mon bootply: vue (ne semble pas être atm de travail)
Mon jsfiddle: vue
Quelqu'un sait comment je peux résoudre ce problème?
Observation : modifier la balise h2 dans la première rangée de h4 puis elle a déclaré à travailler pour de grandes résolutions d'écrans au-dessus de 1200 px, si je supprimer les balises d'ancrage, son travail tout le temps
OriginalL'auteur Garreth 00 | 2015-06-18
Vous devez vous connecter pour publier un commentaire.
Samus est réponse est en fait très proches, mais étant donné que ce que vous voulez, c'est:
.article-box .well
éléments dans chaque ligneEt le fait que le plugin simplement fait la promesse:
La solution est de sélectionner les éléments à l'intérieur de chaque ligne individuellement et appliquer le plugin chaque collection séparément comme suit:
Vous pouvez le voir à l'œuvre dans cette mise à jour de votre jsFiddle. Vous remarquerez que les puits dans la première rangée et le puits dans la seconde, sont à une hauteur différente mais la même pour chaque ligne si vous examinez avec votre navigateur outils de dev.
OriginalL'auteur jeteon
Option par défaut est en ligne - https://github.com/liabru/jquery-match-height#options
Là vous allez. 🙂
n'est-il pas le faire?
Si je tourne de byRow (0/False) toutes les cases sur la page obtenir la même taille, pas seulement celles qui sont dans la même ligne.
OriginalL'auteur Samus
Essayer cette amorce l'égalité des colonnes-hauteur CSS seule solution Minimit à la place:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Vous aurez aussi besoin de ce CSS sur la
wells
à remplir la même hauteur des colonnes:OriginalL'auteur Chadnaut
Vous postulez
matchHeight()
sur.article-box .well
qui n'a pas de frères et sœurs.Il devrait être
Appply certains couleur d'arrière-plan à
article-box
de voir le résultat.OriginalL'auteur sunil gautam
Ferraille le plugin. Le faire manuellement:
http://jsfiddle.net/9ru53a28/16/
OriginalL'auteur Jamie Barker
J'ai eu le même problème où matchHeight semble ne pas fonctionner, cependant après le débogage, j'ai réalisé que le premier élément en vertu de la DIV que j'ai été le ciblage a une marge négative de valeur supérieur. jQuery matchHeight a des problèmes avec des marges négatives valeurs.
Juste de le poster ici afin qu'il puisse être utile à quelqu'un qui pourrait être négative dans les valeurs de marge avec matchHeight.
OriginalL'auteur Tiji