最后一项边框在Owl-Carousel中不起作用

Question

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

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

实施例1

当引导网格<div class="col-*-*">...</div>

中的Owl Carousel 换行时

<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

但是，当引导网格<div class="col-*-*">...</div>

中的Owl Carousel 没有换行时

<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中的边框问题？

Answer 1

添加一段代码

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

的 DEMO

在全屏模式下工作正常

Answer 2

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

DEMO：http://jsfiddle.net/zwd9uysg/19/

HTML

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

CSS

.owl-me {padding-right:0;}

Answer 3

在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;
}

Answer 4

我通过将border-color设置为透明并使用插入框阴影来解决它：

 return "persons/person_edit";