如何修复Bootstrap滑块上的弹出位置？

Question

如何修复Bootstrap滑块上的弹出位置，当屏幕尺寸缩小时，不要移动？

需要在幻灯片上固定位置，因此在调整大小时，他们需要保持在同一位置。例如，在第二个滑块中，您会在电视上方看到一个白点。无论屏幕尺寸如何，这都需要在电视上方。

这是在线网址：comfortica.nl

首先是popover

<div class="center1">
    <span class="qs">
        <span class="popover above">
            <p>Apparaten gaan varzelf uit</p>
        </span>
    </span>
</div>

CSS

.center1 {
    margin-left: 51%;
    position: relative;
    top: -10%;
    width: 30px;
}

Answer 1

.center1 {
    // just to be able to see
    background:pink;
    // give 100% width to make it full screen
    // max-width will make it the larger size 
    width: 100%;
    max-width:680px;
    margin:0 auto;
}

Answer 2

您可以尝试自适应布局。加载bootstrap-responsive.css并自定义“popover above”的样式以适应不同的屏幕尺寸。