Bootstrap Col Divs - 始终等高

Posted 2023-03-05

【中文标题】Bootstrap Col Divs - 始终等高

【英文标题】：Bootstrap Col Divs - Always Equal Height

【发布时间】：2017-12-29 11:02:25

【问题描述】：

每个 div 都在获取我上传到 WordPress 的背景图片。我希望能够上传任何分辨率的图像以用作背景图像，同时保持每个 div 的高度相同。

HTML：

<?php get_header(); ?>

<div class="row portfolio-content">
  <?php if(  have_posts() ) : while (  have_posts() ) :  the_post(); ?>
    <div class="col-xs-12 col-sm-6 col-md-4 portfolio-item">
      <a href="#">
         <img src="<?php echo 
         wp_get_attachment_url(get_post_thumbnail_id()); ?>" >
      </a>
    </div>
  <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

Sass/CSS：

 .portfolio-content
  .portfolio-item
    @include global-box-shadow;
    @include global-div-spacing;
    background: $white;
    text-align: center;
    padding: 2rem;
    a
      position: relative;
      text-decoration: none;
      img
       width: 100%;
     
    
   
  

【问题讨论】：

How can I make Bootstrap columns all the same height?的可能重复

【参考方案1】：

一种方法是将图像指定为空 div 上的背景并调整 div 的“padding-top”以达到所需的纵横比（例如：padding-top：56.25%；给出横向比例）。

这是一个使用 4 个不同尺寸图像的示例小提琴：

<div class="portfolio-grid">

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <!-- DP Image as Background -->
            <div class="dp" style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') center center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>

    </a>

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <div class="dp" style="background: url('http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg') center center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>
    </a>

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <div class="dp" style="background: url('http://www.seoghostwriter.com/wp-content/themes/thesis_151/rotator/sample-4.jpg') center center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>
    </a>

    <a href="#" class="portfolio-item">
        <div class="wrapper">
            <div class="dp" style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') top center no-repeat; background-size: cover;"></div>
            <div class="details">
                <h2>Item Heading</h2>
            </div>
        </div>
    </a>

</div>

.portfolio-grid 
    .portfolio-item 
        display: block;
        text-decoration: none;
        float: left;
        width: 33.333333%;
        padding: 15px;
        font-family: Arial, sans-serif;
        .dp 
            display: block;
            padding-top: 56.25%;
        
        .details 
            h2 
                margin: 0 0 6px;
                font-size: 14px;
                color: #444;
            
        
        /* Control .portfolio-item's width on Various Screen Sizes */
        @media(max-width:767px) 
            width: 50%;
        

        @media(max-width:479px) 
            width: 100%;
        
        /* ------ */
    

https://jsfiddle.net/zsrb1zj7/11/

【讨论】：

有趣。谢谢！