响应式设计失败

Question

我搞砸了响应式的设计，如果你把浏览器缩小，你会看到所有的图形都乱七八糟的。如果css中的浏览器尺寸较小，是否有办法修复图形以使其停留在应有的位置。http://www.magnixsolutions.com/dev/test/test.html

Answer 1

看起来您正在使用Bootstrap，它有用于响应式设计的工具。最重要的是，您希望确保使用.row类和spanx列类。有关更多详细信息，请参阅How to use Twitter Bootstrap to Create a Responsive Website Design。

默认网格为12列。因此，一行中的跨度应该等于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集。您可能需要覆盖才能获得所需的结果。

Answer 2

您需要使用媒体查询They are amazing!