Twitter Bootstrap：圖片定位

Question

我使用Twitter Bootstrap自定義我的網站。我試圖插入一個定位爲頂層的圖像，稍微位於「容器外」，並且可以響應性地調整大小，同時保持與其他元素成比例的關係。我想使用位置：相對，但圖像似乎強制進入容器內的一個盒子。當我使用position：absolute時，圖像首先在我的Web瀏覽器中正確顯示，但在屏幕調整大小時，它不像預期那樣運行。

任何人都可以幫我找出解決這個問題的好方法嗎？

HTML：我沒有包含在它自己的圖像，但仍位於整體。這裏的代碼：

<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles"> 

CSS：這是我的自定義CSS。

img#babee-bubbles { 
z-index: 100; 
position: relative; 
top: 51%; 
left: 7.5%; 
} 

我很感激任何幫助尋找解決方案和/或幫助我的代碼/語法。提前致謝。

Answer 1

要使用引導程序設計響應式網站，您可以使用引導程序佈局。 流體佈局具有「流體流動」類，您可以在使用類作爲範圍時指定寬度。 這個結構將會有反應。測試它只是調整您的瀏覽器窗口。

<div class="row-fluid"> 
    <div class="span2"> 
     <img>....</img> 
     ...... 
    </div> 
    <div class="span2"> 
    </div> 
    ...... 

</div> 

Bootstrap將屏幕大小分爲12部分。我們可以通過給

class="span*" 

*是沒有的一部分使用的那部分。