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(); ?>

我还手动向CSS添加了row-eq-height类，但仍然无法正常工作

我在做什么错了？

编辑：这是生成的代码

<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

它们具有相同的高度，但每一列都有不同的内容，并且此内容未占用全部高度。

您可以将_transformVector添加到卡片元素：

h-100

为什么row-eq-height类对列高不起作用

1 个答案: