弹出窗口未显示正确的对齐Bootstrap
[英]Popover does not displaying proper align Bootstrap
问题描述
I am working on one project where I want to display some value in a popover. 
我正在开发一个项目，希望在弹出窗口中显示一些值。 But as I tried many things it's not displaying properly. 但是当我尝试了很多事情后，它无法正确显示。 Have a look at my code. 看看我的代码。 I wrap some div in a tag for making a popover on it. 我将一些div包装在标记中，以在其上制作弹出框。 it's not working properly. 它无法正常工作。
if i wrap it in div then popover is not displaying. 如果我将它包装在div中，则不会显示弹出窗口。 let me know whats wrong in my code or give me some suggestion. 让我知道我的代码有什么问题或给我一些建议。
https://codepen.io/awesome_designer/pen/EoazJv https://codepen.io/awesome_designer/pen/EoazJv
<main class="set-callback-main-wrap">
<div class="row">
<div class="col-xs-12">
<div class="callback-table-main-wrap">
<div class="call-back-time-header clearfix">
<div class="call-back-time-value blank-slot">
<span></span>
</div>
<div class="call-back-time-value first-slot">
<span>12am</span>
</div>
</div>
<div class="clearfix table-date-value">
<div class="call-back-date">
<span>Dec 1</span>
</div>
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner cyan"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<div class="call-set-slot-inner"></div>
<!-- </div> -->
</div>
</div>
</div>
</div>
</main>
2 个解决方案
解决方案1
0 2017-12-14 07:59:27
By default, the popover will appear on the right side of the element. 默认情况下，弹出框将显示在元素的右侧。
adjust an attribute data-toggle="popover" to every block of <div> (element) 调整属性data-toggle="popover"到<div> 每个块（元素）
<div class="call-set-slot-inner pink" data-toggle="popover" data-trigger="focus" data-container="body" data-placement="right" data-html="true" id="login"></div>
With data-trigger="focus" 使用data-trigger="focus"
data-trigger="focus" attribute which will close the popover when clicking outside the element:
Edit your javascript 编辑您的JavaScript
$("[data-toggle=popover]").click(function(){
$(this).popover({
html: true,
content: function() {
var id = $(this).attr('id');
return $('#popover-content-' + id).html();
}
});
});
解决方案2
0 2017-12-14 09:24:23
I found the answer. 我找到了答案。
I wrap divs in single div and give a popover to this div and put some style. 我将div包装在单个div中，然后给该div加上一个弹出框，然后放一些样式。 The code is given below. 代码如下。
<div data-toggle="popover" data-container="body" data-triger="focus" data-placement="top" data-html="true" id="login" style="width: 240px;height: 50px;float: left;">
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<!-- </div> -->
<!-- <div class="call-set-slot"> -->
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div class="call-set-slot-inner pink"></div>
<div id="popover-content-login" class="hide">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Bootstrap popover在中间对齐 - Bootstrap popover align in middle
引导程序动态显示PopOver - Bootstrap Displaying PopOver Dynamically
Bootstrap Popover不显示 - Bootstrap Popover not displaying
Bootstrap Popover不显示popover内容 - Bootstrap Popover not displaying popover-content
Bootstrap Popover显示相同的内容 - Bootstrap Popover Displaying the Same Contents
Bootstrap Datepicker显示在弹出窗口后面 - Bootstrap Datepicker is displaying behind popover
Bootstrap 弹出窗口不起作用 - Bootstrap popover does not work
Bootstrap Popover不显示 - Bootstrap popover does not show up
Bootstrap Popover不会保存ckeckbox - Bootstrap popover does not save ckeckboxes
在引导程序弹出窗口中显示一个光滑的网格行编辑器 - Displaying a slick grid row editor in bootstrap popover
相关标签