带 Bootstrap 的居中旋转木马答案

【问题标题】：Centered carousel with Bootstrap带 Bootstrap 的居中旋转木马
【发布时间】：2016-09-12 15:19:40
【问题描述】：

我想使用引导轮播来构建一个带有屏幕外项目的居中滑块。像这个例子（页面上的第二个）：http://owlcarousel.owlgraphic.com/demos/center.html

该示例的问题是，项目未与引导网格对齐。是否有可能基于引导轮播和网格构建它？

【问题讨论】：

标签： jquery twitter-bootstrap slider carousel owl-carousel

【解决方案1】：

只需将整个轮播放到带有div 的容器中，边距为负值：

<div class="container">
  <div style="margin-left: -45px; margin-right: -45px">
    <div class="loop owl-carousel owl-theme owl-center owl-loaded">
       ...
    </div>
  </div>
</div>

您只需要为该负边距选择合适的值

【讨论】：

嗯，感谢您的回答，但我认为这不适用于不同的屏幕尺寸。还是我错了？我希望容器外的滑块全宽。只有幻灯片应该是网格/容器的大小

【解决方案2】：

我找到了解决方案。您可以根据断点为 div ".item" 指定容器的最小宽度。

对于大屏幕，您可以执行以下操作：

.item {min-width: 1140px}

【讨论】：