Background Img Div（Twitter Bootstrap）

Question

我正在嘗試構建span8寬度和高度不等的模塊。有一個圖像將定義div的高度，以及位於圖像頂部的文字。我在試圖弄清楚在Bootstrap調整div時如何防止部分圖像被裁剪時遇到問題。

另外，我無法弄清楚如何放置文本框。我想要有兩個文本框 - 一個位於垂直0％，第二個垂直位於50％。

<div class="row"> 
    <div class="span12 promo"> 
     <div class="content"> 
      <div class="row-fluid"> 
       <div class="topText span24"> 
        Text positioned on the top half 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="botText span24"> 
        Text positioned on the bottom half 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

.promo { height: 100%; } 
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }  
.promo .content .row-fluid { height: 50px; } 

Answer 1

你試過設置min-height財產？這將設置最小高度，以便您的圖像不會被切斷。

我會嘗試設置兩個div到height:50%;，這應該給你正確的效果。