Question

似乎无法想出这个。

我希望有一个背景图像应该应用在div的右手部分，并且使用Bootstrap列思考是最好的响应方式。但是，图像没有显示，因为无论CSS如何，列div的高度始终为1像素。

为什么这个以及如何将其设置为另一个div的全部高度？

HTML

<div id="procedure-singleReview" class="well">
    <div class="row">
        <div class="col-md-8">
            <h2 class="bv-brand">Here's what a happy client says...</h2>
            <blockquote>
                <?php echo $sidebarReviews[0]->post_excerpt;?>
                <footer><?php echo get_post_meta($sidebarReviews[0]->ID,'client_name',true);?> <span class="rating rating-<?php echo get_post_meta($sidebarReviews[0]->ID, 'rating', true);?>"></span></footer>
            </blockquote>
            <a href="<?php echo get_the_permalink($sidebarReviews[0]->ID);?>" class="btn btn-primary">Read full review</a> <a href="/testimonial-reviews/" class="btn btn-default">Read all reviews</a>
        </div>
        <div class="col-md-4 hidden-sm img"></div>
    </div>
</div>

CSS

#procedure-singleReview .img {
    height:100%;
    background-image:url(http://placehold.it/800x600);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

Answer 1

试试这个

#procedure-singleReview{display:flex;}

#procedure-singleReview .img {
    height:100%;
    background-image:url(http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
  
}
#procedure-singleReview{display:flex;}

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="procedure-singleReview" class="well">
    <div class="row">
        <div class="col-sm-8">
            <h2 class="bv-brand">Here's what a happy client says...</h2>
            <blockquote>
                <?php echo $sidebarReviews[0]->post_excerpt;?>
                <footer><?php echo get_post_meta($sidebarReviews[0]->ID,'client_name',true);?> <span class="rating rating-<?php echo get_post_meta($sidebarReviews[0]->ID, 'rating', true);?>"></span></footer>
            </blockquote>
            <a href="<?php echo get_the_permalink($sidebarReviews[0]->ID);?>" class="btn btn-primary">Read full review</a> <a href="/testimonial-reviews/" class="btn btn-default">Read all reviews</a>
        </div>
        <div class="col-sm-4 hidden-xs img">sfsfsfsdfsfsfs</div>
    </div>
</div>

Answer 2

你可以给你的div min-height。这是jsfiddle

#procedure-singleReview .img {
    height:100%;
    background-image:url(https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
    min-height:500px;
}

将背景图像应用于Bootstrap列，但是给出0高度？

2 个答案: