Question

在下图中，当屏幕尺寸较小时，您可以看到我的右箭头已离开屏幕。我该如何解决这个问题？

箭头和旋转木马主要使用bootstrap的网格对齐，并带有一点自定义css。最简单的方法是在JSFiddle中查看，但这里是HTML：

<div class="container-fluid">
    <div class="row vcenter-parent">

        <div id="carouselParent" class="col-xs-12">
            <div id="carousel">
                <div><img src="http://goo.gl/Z0AdfK"></img></div>
                <div><img src="http://goo.gl/Z0AdfK"></img></div>
                <div><img src="http://goo.gl/Z0AdfK"></img></div>
            </div>    
        </div>

        <div class="col-xs-1 vcenter-child" style="float:left;">
            <a class="slick-prev">
                <i class="fa fa-arrow-left fa-4x"> </i>
            </a>
        </div>

        <div class="col-xs-1 col-xs-offset-11 vcenter-child hright" style="float:right;">
            <a class="slick-next">
                <i class="fa fa-arrow-right fa-4x"> </i>
            </a>
        </div>    
    </div>           
</div>

我认为发生了什么：

箭头不受div宽度的约束。对于左箭头，这是正常的，因为箭头继续在div的右侧，所以实际上只有左边的填充影响了箭头的位置。

但是，在右侧，箭头在左侧填充后开始绘制，并继续从屏幕上移开。

<小时/> 的更新是的，我的列数学错误，它应该是10而不是11的偏移。但是，现在需要将箭头推到右侧。有什么想法吗？

Updated JSFiddle

Answer 1

您的引导列偏移正在弄乱列布局。只需将每个箭头移动到单个尺寸的12列中，然后分别左右浮动。

＆＃13;

<div class="container-fluid">
    <div class="row vcenter-parent">
        <div id="carouselParent" class="col-xs-12">
            <div id="carousel">
                <div><img src="http://goo.gl/Z0AdfK"></img></div>
                <div><img src="http://goo.gl/Z0AdfK"></img></div>
                <div><img src="http://goo.gl/Z0AdfK"></img></div>
            </div>    
        </div>
         
        <div class="col-xs-12 vcenter-child" style="float:left;">
            <a class="slick-prev pull-left">
                <i class="fa fa-arrow-left fa-4x"> </i>
            </a>
            <a class="slick-next pull-right">
                <i class="fa fa-arrow-right fa-4x"> </i>
            </a>
        </div>
    </div>
    
    <div class="row vcenter-parent" style="padding-top: 50px">
        <div class="col-xs-10.col-xs-offset-1">
            <div id="carouselText">
                <div><p>meow</p></div>
                <div><p>meow meow</p></div>
                <div><p>meeeeow meow</p></div>
            </div>
        </div>
    </div>
                  
</div>

＆＃13;

屏幕尺寸较小时如何在屏幕右侧对齐图标

1 个答案: