2016-08-19 65 views
0

似乎無法找出這一個。將背景圖像應用於Bootstrap列,但給0高度?

我想有這應該在一個div的右手部分應用背景圖像,並使用自舉列會做到這一點的最好方式響應思想。但是,圖像沒有顯示,因爲列div的高度始終爲1像素,無論CSS如何。

這是爲什麼,我該如何將其設置爲在其他分區的整個高度?

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; 
} 
+0

你會嘗試'background-size:100%;'? –

+0

儘管我已經嘗試過了,但它並未改變高度,隻影響容器內背景圖像的顯示(在此情況下爲1像素高)。無論如何,我不希望將背景大小設置爲100%,因爲我希望它特別使用「封面」來填充div的空間。 – Lee

+0

'身高:100%'不起作用。如果你想以這種方式使用它,你需要在父元素上設置一個高度(比如100px)。看到這個小提琴:https://jsfiddle.net/1max0ry9/ – user3528269

回答

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>

+0

我使用COL-SM級,因爲它只需添加#程序,singleReview {顯示:柔性;}在你的樣式表 –

+0

爲什麼更改父div來'flex',導致'行'div來縮短它的寬度?它不是100%更多的 – Lee

0

你可以給min-height你的div。這裏是一個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; 
} 
+0

我真的不希望使用固定的高度,在左側窗格中的內容會改變div容器 – Lee

+0

的高度,那麼我認爲你剛纔應該把你的背景是裏面的圖像DIV –