Почему класс row-eq-height не работает на высоте столбца

Question

Я использую bootstrap 4 для кодирования WordPress темы.

Но не понял, почему класс row-eq-height не работает на столбцах начальной загрузки.

мои коды:

<?php get_header(); ?>

<div class="container mt-4  "> 
     <strong><?php echo single_cat_title(); ?> </strong> <hr>   
    <div class="row row-eq-height "> 
        <?php while ( have_posts() ) : the_post();  ?>
        <div class="col-md-4">
         <div class="card mb-4 border-dark">
            <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">

            <div class="card-body">
               <h5 class="card-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
               <p class="card-text"><?php the_excerpt(''); ?></p>
               <a href="<?php the_permalink(); ?>" class="btn btn-dark btn-sm">More..</a>
            </div>
         </div>
      </div>

    <?php endwhile; ?>


    </div>
</div>

<?php get_footer(); ?>

Я также добавляю класс row-eq-height в css вручную, но все еще не работает

Что я делаю не так?

edit: вот сгенерированный код

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div class="row "> 
    				<div class="col-md-4">
             <div class="card mb-4 border-dark">
                <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">
               
                <div class="card-body">
                   <h5 class="card-title"><a href="http://localhost/alfa/selam/" title="Selam">Selam</a></h5>
                   <p class="card-text"></p><p>dsff nmfgmnf</p>
    <p></p>
                   <a href="http://localhost/alfa/selam/" class="btn btn-dark btn-sm">More..</a>
                </div>
             </div>
          </div>
    
    			<div class="col-md-4">
             <div class="card mb-4 border-dark">
                <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">
               
                <div class="card-body">
                   <h5 class="card-title"><a href="http://localhost/alfa/merhaba-dunya/" title="Merhaba dünya!">Merhaba dünya!</a></h5>
                   <p class="card-text"></p><p>The standard Lorem Ipsum passage, used since the 1500s “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse […]</p>
    <p></p>
                   <a href="http://localhost/alfa/merhaba-dunya/" class="btn btn-dark btn-sm">More..</a>
                </div>
             </div>
          </div>
    
    	
    
    	</div></div>

Answer 1

Они имеют одинаковую высоту, но каждый столбец имеет разное содержимое, и это содержимое не занимает полную высоту.

Вы можете добавить h-100 к элементу карты:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div class="row ">
    <div class="col-md-4">
      <div class="card h-100 border-dark">
        <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">

        <div class="card-body">
          <h5 class="card-title"><a href="http://localhost/alfa/selam/" title="Selam">Selam</a></h5>
          <p class="card-text"></p>
          <p>dsff nmfgmnf</p>
          <p></p>
          <a href="http://localhost/alfa/selam/" class="btn btn-dark btn-sm">More..</a>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card h-100  border-dark">
        <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap">

        <div class="card-body">
          <h5 class="card-title"><a href="http://localhost/alfa/merhaba-dunya/" title="Merhaba dünya!">Merhaba dünya!</a></h5>
          <p class="card-text"></p>
          <p>The standard Lorem Ipsum passage, used since the 1500s “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse […]</p>
          <p></p>
          <a href="http://localhost/alfa/merhaba-dunya/" class="btn btn-dark btn-sm">More..</a>
        </div>
      </div>
    </div>



  </div>
</div>