2

我正在将[Owl Carousel][1]与Bootstrap一起使用。但最后一项边框在 Owl-Carousel 中不起作用。

我想在项目悬停时添加边框。但右边框不显示在最后一项中。

示例-1

当 Owl Carousel包裹在 bootstrap Grid 中时<div class="col-*-*">...</div>

<div class="container">
    <div class="row">
       <div class="col-sm-9">
<div id="owl-example1" class="owl-carousel">
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    </div></div></div></div>

所以，我明白了。（不能正常工作。） 在此处输入图像描述

示例 2

但是，当 Owl Carousel没有在 bootstrap Grid 中换行时<div class="col-*-*">...</div>

<div class="container">
<div id="owl-example" class="owl-carousel">
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl img-responsive" src="http://tinyurl.com/lwexfpf" alt="Lazy Owl Image"></div>
    </div></div>

所以，我明白了。（工作正常。） 在此处输入图像描述

现场演示 - http://jsfiddle.net/harnishdesign/zwd9uysg/18/embedded/result/

如何解决 Example-1 中的边界问题？

4

5 回答 5

1

删除包含 owl carousel 的列上的右侧填充：

演示：http: //jsfiddle.net/zwd9uysg/19/

HTML

 <div class="col-sm-9 owl-me">

CSS

.owl-me {padding-right:0;}
于 2014-09-17T20:25:58.670 回答
1

添加一段代码

#owl-example1 {
   width : 850px; /* if you dont know the exact width mean set as 100.3% */
}

演示

它在全屏模式下工作正常

于 2014-09-16T10:11:34.820 回答
0

在 CSS 下面使用。我已经测试过jsfiddle

.owl-carousel .owl-item .item {
padding: 10px;
border-right: 1px solid #f00;    
}
.owl-carousel .owl-wrapper-outer {
overflow: hidden;
position: relative;
width: 100%;
border: 1px solid #f00;
}
于 2014-09-16T10:42:34.840 回答
0

我解决了这个问题：

.owl-wrapper-outer {
    border-left:  2px solid silver;

}
.owl-wrapper .owl-item {
    border:       solid silver;
    border-width: 2px 2px 2px 0;
    margin-left:  -1px;
}

margin-left将项目拉到足够的位置以使最后一个右边框可见。

于 2015-08-26T15:00:43.600 回答
0

我通过将边框颜色设置为透明并使用插入框阴影来解决它：

.owl-carousel .owl-item .item {
   border: 1px solid transparent;
   box-shadow: inset 0px 0px 0px 1px #000000;
}
于 2020-02-20T07:35:34.607 回答