彈出式窗口內容出現在不同的位置

在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

彈出式窗口內容出現在不同的位置

回答

相關問題