Question

我被困在我的应用程序主要css搞砸的bootstrap css的洞里。

我正在使用angular-bootstrap'popover，但是popover的箭头搞砸了。像这样：

和css：

css'.card .card-panel .card-body .arrow'是我主css文件中的css。和'.test-popover .popover.right＆gt; .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">包装来纠正错误。 .row正在处理这些事情。嵌套cols就是导致额外填充的原因。

Answer 2

一种可能的解决方案是在bootstrap之后加载主css

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">

这将覆盖主css

的bootstrap css

Answer 3

我终于解决了这个问题！我在我的popover中添加了一个更具特异性的css表，完美地解决了这个问题！谢谢你的帮助！

与主css搞砸了bootstrap css

3 个答案: