在twitter引導中將圖像嵌套在另一個上

我試圖在另一個圖像上嵌套圖像（使用twitter引導程序）問題出在我重新調整瀏覽器大小時，箭頭圖像位置不一致（請參閱圖像）在twitter引導中將圖像嵌套在另一個上

它應該是：

enter image description here

而且當瀏覽器重新調整大小：

enter image description here

而且代碼：

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4"> 
     <div> 
      <img alt="" src="../images/fulltime.png" class="img-responsive" /> 
      <img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" /> 
      <label style="position: absolute; top: 12px; left: 43px; font-size: 19px; font-family: Trebuchet MS; 
       color: White;"> 
       Professional 
      </label> 
      <p style="position: absolute; top: 80px; left: 25px; font-size: 13px;"> 
       random text 
       <br /> 
       random text 
       <br /> 
       random text 
      </p> 
     </div> 
    </div> 
    </div> 
</div>

我幹了什麼錯在這裏做什麼？還是不可能？

注意：我只是用引導程序更改我最近的網站，所以我對這個東西很陌生，如果有幫助，我會使用引導程序v3。

謝謝。

來源

2013-07-30 Abie Giordano

找到了解決辦法，只需添加img-responsive班，<div class="col-lg-4">標籤

內使其<div class="col-lg-4 img-responsive">

圖像撐「完整」現在無論瀏覽器的屏幕如何調整大小，乾杯！

來源

2013-07-31 04:44:46

目前您正在使用top: 170px; left: 341px或者說從左邊走341px，從頂部走170px。如果你使用底部和右側而不是頂部和左側來定位它，那麼它會錨定到右下角，並且你會說「從底部開始很多像素，從右側開始如此之多」

所以不是：

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />

有類似：

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; bottom: 50px; right: 19px" />

更改號碼，以適應但要注意現在top是bottom和left現在right

來源

2013-07-30 09:40:14 ridecar2

對不起，但我錯過了你的觀點和答案，你能解釋一下嗎？ :) –

完成一個小小的更新以提供幫助。 – ridecar2

感謝您的解決方案，但是在瀏覽器重新調整大小的某個時刻出現問題，請在這裏查看http://postimg.org/image/rnv4qyo4n/ –

在twitter引導中將圖像嵌套在另一個上

回答

相關問題