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

Posted 2023-02-23

【中文标题】当屏幕尺寸较小时如何在屏幕右侧对齐图标

【英文标题】：How to aligning icon on right side of the screen when the screen size is small

【发布时间】：2016-01-03 21:59:49

【问题描述】：

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

箭头和轮播主要使用引导程序的网格和一点点自定义 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

【问题讨论】：

你真的需要那些col-xs-1 类吗？我认为这是问题的一部分

@cocoa 我敢肯定。

【参考方案1】：

您的引导列偏移量弄乱了列布局。只需将每个箭头移动到一个 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>