Bootstrap弹出框没有与箭头对齐

时间：2017-10-23 09:50:56

标签： html css twitter-bootstrap bootstrap-popover

我在我的项目中使用bootstrap popovers，我遇到了问题。我的弹出窗口被推高，因为它击中了我可见屏幕的底部，但当我向下滚动时，它不会向下移动以及与箭头对齐。

这里有一张现场直播的照片，看到我向下滚动但它并没有向我移动。 Issue

编辑：代码

＆＃13;
＆＃13; 
$(document).ready(function(){
	$("[data-toggle=popover]").popover({
		trigger: 'hover',
		html: true
	})
});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.popover {
	border-radius: 0;
	border: none;
	background: none;
}
.popover.bs-popover-right .arrow::after {
	border-right-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-left .arrow::after {
	border-left-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-top .arrow::after {
	border-top-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-bottom .arrow::after {
	border-bottom-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-auto[x-placement^=bottom] .popover-header::before,
.popover.bs-popover-bottom .popover-header::before {
	border-bottom: 1px solid rgba(0, 80, 173, 0.8);
}
.popover-header {
	padding: 18px 23px;
	border-radius: 0;
	color: #fff;
	background: rgba(0, 80, 173, 0.5);
	border-bottom: 1px solid rgba(0, 80, 173, 0.8);
}
.popover-body {
	padding: 19px 24px;
	border-radius: 0;
	color: #eaeaea;
	background: rgba(0, 80, 173, 0.5);
}
</style>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12 col-md-4" style="height: 120vh;">
				<img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
				<img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
				<img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
			</div>
		</div>
	</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您可能有一个外部css文件覆盖了Bootstrap默认css。 （top：50％;）应该在arrow div中工作，并且需要确保父div是（position：relative;）。相对父div将根据内容帮助箭头div垂直中间对齐（顶部：50％;）。

相关问题
最新问题