引导弹出框未与箭头对齐答案

【问题标题】：Bootstrap popovers not aligning with arrow引导弹出框未与箭头对齐
【发布时间】：2017-10-23 09:50:55
【问题描述】：

我在我的一个项目中使用引导弹出框，但遇到了问题。我的弹出框被向上推，因为它碰到了可见屏幕的底部，但是当我向下滚动时，它也不会向下移动以与箭头对齐。

这是现场发生的照片，请看我已经向下滚动，但它并没有随着我向下移动。

编辑：代码

$(document).ready(function(){
	$("[data-toggle=popover]").popover({
		trigger: 'hover',
		html: true
	})
});

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

【问题讨论】：

在什么情况下弹出，未对齐请提及状态因为我检查它们工作正常。
@HardenRahul 我已经编辑了帖子，因为我发现我的问题不是我想的那样。
你的代码在 jsfiddle 或 codepen 中吗？
@Sodhisaab 将鼠标悬停在第三张图片上（向下滚动，不要转到整页）

标签： html css twitter-bootstrap bootstrap-popover

【解决方案1】：

您可能有一个外部 css 文件正在覆盖 Bootstrap 默认 css。 (top:50%;) 应该在箭头 div 中工作，并且需要确保父 div 也是 (position: relative;) 。相对父 div 将根据内容帮助箭头 div 垂直居中对齐 (top:50%;)。

【讨论】：

是的，这只会让事情变得更糟。虽然这不是一个完美的解决方案，但我只是将弹出框移到图像上方。