Bootstrap 居中轮播
Centered carousel with Bootstrap
我想使用 bootstrap 旋转木马构建一个带有屏幕外项目的居中滑块。像这个例子(页面上的第二个):http://owlcarousel.owlgraphic.com/demos/center.html
示例的问题在于,项目未与 bootstrap 网格对齐。有没有可能基于 bootsrap 轮播和网格构建它?
只需将整个旋转木马放置到 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>
你只需要为负边距选择合适的值
我找到了解决办法。您可以根据断点为 div ".item" 指定容器的最小宽度。
对于大屏幕,您可以执行以下操作:
.item {min-width: 1140px}
我想使用 bootstrap 旋转木马构建一个带有屏幕外项目的居中滑块。像这个例子(页面上的第二个):http://owlcarousel.owlgraphic.com/demos/center.html
示例的问题在于,项目未与 bootstrap 网格对齐。有没有可能基于 bootsrap 轮播和网格构建它?
只需将整个旋转木马放置到 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>
你只需要为负边距选择合适的值
我找到了解决办法。您可以根据断点为 div ".item" 指定容器的最小宽度。
对于大屏幕,您可以执行以下操作:
.item {min-width: 1140px}