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

在下图中，您可以看到当屏幕尺寸很小时，我的右箭头已经离开屏幕。我怎样才能解决这个问题？当屏幕尺寸很小时，如何在屏幕右侧对齐图标

箭头和转盘排列大多采用引导的网格，自定义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

来源

2015-10-06 Scott

你真的需要那些'COL-XS-1'类？我认为这是问题的一部分 – cocoa

@cocoa我非常肯定我的确如此。 – Scott

你举列偏移被搞乱列布局。只需将每个箭头移动到一个单一大小的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>

来源

2015-10-06 21:07:22 Corey

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

回答

相关问题