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

Question

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

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

这是在线网址：comfortica.nl

第一个弹出窗口

<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

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

Answer 2

.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;
}