css - Bootstrap 和 topcoat 样式重叠，移动滑动菜单背景

Question

我想使用两种 css 样式 bootstrap 和 topcoat。我使用 Angular 滑动菜单功能 (ng-mobile-menu)。当我添加 Bootstrap cdn 时。它覆盖了 topcoat 菜单，结果幻灯片菜单的背景颜色变得更短，只是覆盖了菜单列表:http://www.elmandato.pl但应该是http://www.shoppinpal.github.io/ng-mobile-menu/demo/#/skinny .我应该添加到(链接 rel 的更改顺序无关紧要):

<link rel="stylesheet" href="topcoat/css/topcoat-mobile-dark.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0./css/bootstrap.min.css"/>
<link rel="stylesheet" href="ng-mobile-menu.min.css"/>
<style>
html, body {
  margin:0;
  padding:0;
  height: 100%;
}

#menubutton {
  padding: 0 1.25rem;
  font-size: 16px;
  /* vertically center button text */
  line-height: 3rem;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: white;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #a5a8a8;
}
</style>

Answer 1

Bootstrap 覆盖了 topcoat，因为您已将指向它的链接放在 topcoat 下方。 CSS 从上到下层叠，这意味着 Bootstrap 覆盖、面漆，而 ng-mobile-menu.min.css 覆盖 Bootstrap 和面漆。尝试将 bootstrap 放在 topcoat 之上，然后使用开发人员工具查看类/ID 的选择器是什么，并在需要时覆盖