響應式設計失敗

Question

我搞砸了響應式設計，如果您將瀏覽器縮小到最小，您會看到所有圖形都混亂了。如果瀏覽器在css中尺寸較小，是否有辦法修復圖形以保持它們應該在的位置。 http://www.magnixsolutions.com/dev/test/test.html

Answer 1

您需要使用媒體查詢They are amazing!

Answer 2

它看起來像你使用引導，這對於響應式設計的工具。主要的是你要確保使用。行類和spanx列類。有關更多詳情，請參閱How to use Twitter Bootstrap to Create a Responsive Website Design。

默認網格爲12列。所以你的連續跨度應該等於十二。 你的HTML應該是這個樣子：

<div class="container"> 
    <div class="row"> 
      <div class="span8 image"> 
      </div> 
      <div class="span4 containerForm"> 
      ...insert form here... 
      </div> 
    </div> 
</div> 

一旦你的標記設置不當，到CSS和開始添加@media查詢，@watson提到了他的答案。但請注意。 Bootsrap有很多默認的CSS設置。您可能必須重寫才能獲得理想的結果。