當屏幕尺寸很小時，如何在屏幕右側對齊圖標

Question

在下圖中，您可以看到當屏幕尺寸很小時，我的右箭頭已經離開屏幕。我怎樣才能解決這個問題？

箭頭和轉盤排列大多采用引導的網格，自定義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

你舉列偏移被搞亂列布局。只需將每個箭頭移動到一個單一大小的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>