响应式设计失败

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设置。您可能必须重写才能获得理想的结果。