Leaflet Control Layer 在一个页面中正确显示，并且不会在其他页面中显示相同的代码

Question

我想在我的网站中使用 Leaflet 层，所以我在页面 Working Page, which worked really fine. So I copied the code into my original website Not Working Page 中进行了测试，并尝试了运行，但是控制层似乎不一样就像在测试页中一样。请帮助我解决这个问题，以便我可以像在工作测试页面中一样正确使用它。

Answer 1

在您的 style.css 文件的第 105 行，您正在对页面上的所有输入元素进行全局样式设置，这会干扰 Leaflet 的图层控制。如果去掉宽高规则就ok了:

input {
  width: 85%;
  height: 100%;
  padding: 10px;
  background-color: transparent;
  color: rgba(255,255,255,1);
  border: none;
  font-family: "Myriad Set Pro";
  font-size: 1.1em;
}

您应该考虑使用元素 ID 或 CSS 类对所选元素应用样式。如果你 google 换 "How to apply CSS to HTML" 你会发现很多像下面这样的教程。它会让你免于运行变成这样的东西，因为你只能将样式应用于你指定的元素。

http://www.htmldog.com/guides/css/intermediate/classid/

Leaflet Control Layer 在一个页面中正确显示，并且不会在其他页面中显示相同的代码

Leaflet Control Layer shows up properly in one page and won't show up with the same code in other

twitter-bootstrap

leaflet

bootstrap-modal