如何在右上角正确放置 Bootstrap 指标？答案

【问题标题】：How do I properly place Bootstrap indicators in the upper right corner?如何在右上角正确放置 Bootstrap 指标？
【发布时间】：2016-07-29 22:14:01
【问题描述】：

我想把我的指标放在右上角，如下图我这样做的方式是给指标一个百分比高度和宽度 - 但使用这种方法我无法按下/使用右侧的轮播控件，因为我的指标以某种方式覆盖了它...... 该问题的示例在以下网站上：http://haagmedia.dk/klf/

这是迄今为止我对指标所做的唯一样式

.carousel-indicators {
    text-align: right;
    width: 76%;
    height: 89%;
    opacity: 0.9;
}

希望你能帮我解决这个问题，这样我就可以得到右上角的指示符，而不影响右边换幻灯片的可能性:)

【问题讨论】：

您使用了 89% 的 height。将其设置为固定高度，您应该避免阻止您访问左/右控件的重叠问题。

标签： html css twitter-bootstrap carousel

【解决方案1】：

您 89% 的高度与控件重叠。如果你使用固定的高度和固定的位置，一切都应该正常。

.carousel-indicators {
    position: absolute;
    top: 50px;
    right: 10px;
    text-align: right;
    width: 76%;
    height: 20px;
    opacity: 0.9;
}

用百分比调整固定位置值可能是个好主意...

【讨论】：

现在唯一的问题是，固定定位给我的响应式设计带来了麻烦，因为指标以移动设备大小为中心。我想这是我以前习惯百分比开始的部分原因:)我能做什么的任何线索，所以当我缩小窗口时它们会保持原位？对不起，蹩脚的问题，Bootstrap 的新手 :)
您可以使用标准的 css 媒体查询，如果视口的宽度小于某个值，您可以调整这些值或使用完整的其他定位。