在Bootstrap的猫头鹰轮播旁边放置下一个/上一个按钮

Question

我试图将一些文本按钮放置在bootstrap 3的猫头鹰转盘的两侧，垂直居中，并且在桌面上不可见时不可见。

我的代码如下所示：

<div class="container">       
    <div class="row">
        <div class="col-md-2 text-right visible-desktop">
            <<<
        </div>
        <div class="col-md-8">
            <div id="owlCarousel" class="owl-carousel">
            </div>
        </div>
        <div class="col-md-2 text-left visible-desktop">
            >>>
        </div>
    </div>       
    <div class="row text-center">
        <div class="col-md-offset-2 col-md-8">
            <img id="savePlace" src="/assets/img/icon_paperclip_sm.png"/>
        </div>
    </div>  
</div>

这会将文本放在猫头鹰轮播的任何一侧，但是我无法确定如何垂直居中，并且在iPhone上查看时它们也不会消失。 这可能吗？

Answer 1

如果知道滑块的高度，则可以将其设置为按钮或按钮容器的line-height 。

要在较小的屏幕上隐藏按钮，可以使用.hidden-sm .hidden-xs类，并为滑块添加.col-xs-12 .col-md-8 ，以适合屏幕的整个宽度。

试试这个： http : //jsfiddle.net/matcygan/q70wbuwv/9/