Javascript 如何对齐全宽响应滑块上的导航按钮

场景

我在制定最佳解决方案时遇到了一个问题，即使用

我需要箭头，因为它们已经被设计成适合居中容器的偏移列，并在布局发生变化的地方将其覆盖位置保持在767px。目前，它们仅定位在屏幕边缘

下面有一个提琴示例，但一般的原则是，前两张幻灯片保留全宽背景图像（而不是将同一图像滑动两次），只有中间文本发生变化。然后，第三张幻灯片上的背景会随文本一起更改

代码

HTML

注释：

• 我正在使用引导框架
• 从768px到768px的间距必须一致
• 左侧和右侧的百分比声明不会使对齐像我希望的那样一致
• 我宁愿不必频繁地输入多个媒体查询来定位它们
• JavaScript解决方案很好
• 中心容器内的任何内容都必须可单击等
• 不要担心示例中的布局会被破坏，这只是为了让代码片段保持在较小的范围内
• 任何其他疑问或澄清，我很乐意更新问题

示例

---

谢谢您的时间。

我找到了一个解决方案，它可能并不完美，但对我来说效果很好。我使用JavaScript向父级添加一个Bootstap响应容器。然后在子级上，按住div-匹配加载时其父级的宽度并调整页面大小

$(window).on("resize load", function () {
    $('.owl-controls').addClass('container');
    $('.owl-nav').width($('.owl-nav').parent('.container').width());
});

---

你就不能增加一些利润吗？你希望他们的职位结果是什么？我不清楚您想要完成什么。我只希望“下一个”和“上一个”箭头在视口中始终位于内容的左右两侧。页边距是可以的，但它们需要不断的@media声明来保持对齐一致。啊，我理解。我不完全确定您的设置，但您可以尝试为箭头创建一些容器，为点创建另一个容器（以模拟内容），然后将这些容器中的箭头对齐。如果您将视口宽度更改为1380px，则将显示所需的位置。这需要与768px upI的想法保持一致，但Owl Carousel通过JavaScript添加了导航按钮-所以我不确定如何包装它们？

/*owl-nav*/
.owl-prev {
    position: absolute;
    top: 40%;
    left: 0;
}
.owl-next {
    position: absolute;
    top: 40%;
    right: 0;
}
.fa {
    font-size: 80px;
    color: #fff;
}
@media (max-width:767px) {
    .owl-nav {
        display: none;
    }
}
/*owl-dots*/
.owl-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -27px;
}
.owl-dot {
    background: #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    text-indent: -999em;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
}
.owl-dot.active {
    background: #333;
}
/*generic-carousel*/
.carousel-text, .carousel-image {
    margin-top: 20px;
    margin-bottom: 20px;
}
.background-full {
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 410px;
}
.background-one {
    background-image: url(http://www.placehold.it/2560x410/ff6600);
}
.background-two {
    background-image: url(http://www.placehold.it/2560x410/ff0066);
}
/*bootstap-resets*/
@media (min-width: 1200px) {
    .carousel-container {
    width: 970px;
    }
}

$(window).on("resize load", function () {
    $('.owl-controls').addClass('container');
    $('.owl-nav').width($('.owl-nav').parent('.container').width());
});