与主要的CSS搞砸了引导CSS

Question

I am trapped in the hole of bootstrap css messed up with my application main css.

I am using angular-bootstrap'popover, but the popover's arrow was messed up. like this:

and the css:

the css '.card .card-panel .card-body .arrow' is the css in my main css file. and the '.test-popover .popover.right > .arrow' is what i am wanted! I don't why the main css has the higher priority！ How can I solve this?

---

Finally I reappeared this see here Plunker

the main.css is like this

.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

Delete all of the Bootstrap card related HTML and it works as expected.

<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>

The spacing will be slightly different but you can correct that by removing the superfluous .col-xs-12 wrapper within <div class="row" ng-repeat="item in weaponItems"> . The .row is handling that stuff. Having nested cols like that is what causes the extra padding.

Answer 2

One possible solution is to load your main css after bootstrap

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

This will overwrite bootstrap css by your main css

Answer 3

I finally solved this problem! I added a more specificity css sheet to my popover, solved this perfectly! Thanks for all your help!