弹出式窗口内容出现在不同的位置

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

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

我做了一些错误的方式或因为CSS规则.badge-panel-r我得到的结果是正常的吗？

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

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

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

来源

2017-03-27 yaylitzis

您的标记了一些问题。使用data-toggle="popover" data-placement="left" data-content="counter"与跨度。

工作片断

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

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

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

来源

2017-03-27 13:41:43 neophyte

我认为这将是更好地使用自定义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

来源

2017-03-27 13:39:31 ZimSystem

弹出式窗口内容出现在不同的位置

回答

相关问题