Question

在panel heading中，我插入了一个popover的链接，它向右浮动（自定义规则）。问题是稍后弹出内容出现在不同的位置。

我可以添加CSS规则强制弹出窗口出现在badge旁边，但我认为这会自动完成。所以，问题是：

我用错误的方法做了什么，或者因为CSS规则.badge-panel-r我得到的结果是正常的吗？

＆＃13;

$('[data-toggle="popover"]').popover();

＆＃13;

.badge-panel-r {
  float: right;
  font-size: 16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="panel panel-success">
        <div class="panel-heading">
          <i class="fa fa-check space5-right"></i> result
          <a href="#" data-toggle="popover" data-placement="right" data-content="counter"><span class="badge badge-panel-r">1</span></a>
        </div>
        <div class="panel-body" style="background-color:rgba(24, 188, 156, 0.09)">

          <p>text...</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您的加价存在问题。使用data-toggle="popover" data-placement="left" data-content="counter"和span。

工作代码

＆＃13;

$('[data-toggle="popover"]').popover();

＆＃13;

.badge-panel-r {
  float: right;
  font-size: 16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="panel panel-success">
        <div class="panel-heading">
          <i class="fa fa-check space5-right"></i> result
          <a href="#" ><span data-toggle="popover" data-placement="left" data-content="counter" class="badge badge-panel-r">1</span></a>
        </div>
        <div class="panel-body" style="background-color:rgba(24, 188, 156, 0.09)">

          <p>text...</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为最好在链接上使用自定义badge-panel-r类。触发链接也需要float:right。

<a href="#" data-toggle="popover" class="badge-panel-r" data-placement="right" data-content="counter"><span class="badge">1</span></a>

Demo

Popover内容出现在不同的位置

2 个答案: