Twitter的自助分區與響應功能分層

Question

在我的網站上我有一個英雄單位的窗體正在顯示。在表格後面，一系列圖像正在逐漸呈現平穩淡化。

我想通過將容器div設置爲position: relative和將圖像保存爲position: absolute的div來嘗試圖層div與背景圖像div上的窗體。事情是這樣的：

<div class="container"> 
    <div class="row"> 
     <div class="hero" 
     <div class="images"> 
      <img ... /> 
     </div> 

     <div class="form"> 

     </div> 
     </div> 
    </div> 
</div> 

的container和row類來自引導。我的課程有以下幾種風格：

.hero { 
    position: relative; 
} 

.images { 
    position: absolute; 
} 

This works。但是，當我開始調整瀏覽器窗口大小並響應自然時，images div內的圖像不再調整大小，但保持相同的固定大小。

Bootstrap在充分利用Bootstrap的響應特性的同時如何在Bootstrap中有這種類型的div層？

Answer 1

<div class="container"> 
    <div class="row"> 
     <div class="hero custom-image" 
     <div class="form"> 
     </div> 
     </div> 
    </div> 
</div> 

也許你可以添加.custom-image CSS。以百分比％設置.custom-image width。

另一種可能性，加上媒體查詢您的自定義CSS：

/* Landscape phone to portrait tablet */ 

@media (max-width: 767px) { 
.custom-image{ 
width:50%; 
} 
} 

/* Landscape phones and down */ 

@media (max-width: 480px) { 
.custom-image{ 
width:50%; 
} 
}