html - 主 css 搞砸了 bootstrap css

Question

我陷入了 bootstrap css 的漏洞，与我的应用程序主 css 搞混了。

我正在使用 angular-bootstrap'popover，但是 popover 的箭头被弄乱了。像这样:

和CSS:

css '.card .card-panel .card-body .arrow' 是我主 css 文件中的 css。而'.test-popover .popover.right > .arrow'就是我想要的!我不明白为什么主 css 具有更高的优先级!我该如何解决这个问题？

---

终于重现了这个见here Plunker

main.css是这样的

.card .card-panel .card-body .arrow {
  float: right;
  display: inline-block;
  height: 26px;
  width: 26px;
  background-size: 14px 9px;
  background-position: 4px 6px;
  border-radius: 13px;
  border: 2px solid #f00;
  cursor: pointer;
}

Answer 1

删除所有 Bootstrap card相关的 HTML，它按预期工作。

<div ng-app="my-app" ng-controller="controller">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12" style="text-align:center;">
        <h2>Here is a list a weapons</h2>
      </div>
    </div>
    <div class="row" ng-repeat="item in weaponItems">
      <div class="col-xs-12"> <!-- not needed -->
        <div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="right">
          <div class="panel">
            <div class="panel-body" style="min-height:120px;">
              <div><b>Category:</b>&nbsp;{{item.title}}</div>
              <p><b>Desc:</b>&nbsp;{{item.desc}}</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel" style="text-align:center;">
            <img src="{{item.img}}" height="120px" width="auto">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

间距会略有不同，但您可以通过删除多余的 .col-xs-12 来更正。 <div class="row" ng-repeat="item in weaponItems"> 内的 wrapper . .row正在处理那些东西。像这样嵌套列是导致额外填充的原因。