响应式布局并不完全在我想要的位置

Question

一周前我一直试图留下一个与我找到的网站非常相似的响应式布局，但我根本做不到。我正在发送我看到的响应式网站的图片，我正在发送我的图片。

我想做类似的网站是这样的：

http://mapa.buenosaires.gob.ar

而我想做的网站也是在git里，你可以随意克隆、下载、分享：

https://github.com/eltonsantos/snippets_uteis/tree/master/sidebar_bootstrap

网站的正常部分，全屏和大屏幕，我可以完全按照我的意愿进行操作，但是我没有得到响应部分，一切都被破坏、扭曲并且在错误的位置。请问，谁能帮帮我？

即使我使用媒体查询，我也不能完全保留它在网站上的样子，我至少会理解原因。有人可以帮我吗？

Answer 1

CSS从上到下读取，这意味着在移动版本上对元素所做的更改，如果在读取桌面css属性之后可能会获得新的样式。所以你要做的就是重置css代码。

举个例子，

// This is mobile CSS
.btn {
    color: red;
} 

@media screen and (max-width: 500px) {
    // this is desktop CSS
    .btn {
        color: blue;
    }
}

如果我们要让桌面 CSS btn 没有颜色，它会自动变为红色。但是现在我们覆盖它。