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

【问题标题】：How to fix popover position on Bootstrap slider?如何修复 Bootstrap 滑块上的弹出位置？
【发布时间】：2014-11-05 08:34:55
【问题描述】：

如何解决 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;
}

【问题讨论】：

添加这个我希望它能解决你的position.qs .popover p {width: 100%;}
我已添加但未解决问题

标签： html css twitter-bootstrap slider bootstrap-popover

【解决方案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;
}

【讨论】：

你可能想添加：text-align:center;

【解决方案2】：

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

【讨论】：

它使用Bootstrap框架，所以你需要同时添加boostrap.js和css。
您还需要在您的网页顶部添加“”并且您需要定义位置一在不同的屏幕尺寸中按一个。