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

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 的右侧，所以实际上只有左填充会影响箭头的位置。

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

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

Updated JSFiddle

Answer 1

您的 bootstrap 列偏移打乱了列布局。只需将每个箭头移动到一个大小为 12 的列中，然后分别向左和向右浮动。

<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>

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

How to aligning icon on right side of the screen when the screen size is small

css

twitter-bootstrap

font-awesome

slick.js