bxslider - 1px的過多，縮略圖行

Question

滑塊這裏bxslider location

位於幻燈片圖片有652px。這意味着我應該能夠在它下面的一行中放入4張縮略圖，每張縮略圖都有163px，不知何故，4張縮略圖的圖片總計可以達到653px。爲什麼？

Answer 1

問題始於此容器：

<div class="small-12 large-8 columns no-padding-left" role="slider"> 

誰的寬度設置爲66.66667% ...這%與谷歌開發者工具acordding爲651.656px，那麼你不能把這個值作爲652px。

你可以做的是設置寬度爲a標籤：

.bx-pager a{ 
    width:25%; 
} 

而對於IMG：

#bx-pager img { 
    width:100%; 
} 

Answer 2

父div的寬度實際上是651.656px x 214px。所以大的幻燈片圖片是652px，只比實際大小略大。

4個較小的圖片合計爲652p​​x，因此將第4個圖片移動到下一行。

如果您想將4個縮略圖圖片放在同一行上，那麼您不應該在類.large-8下使用width: 66.66667%。另外，通過改變瀏覽器的水平尺寸，它會將你的圖像滑塊移動到下一行，並使你的sidebar伸展。有像這樣的東西：

#sidebar { 
    max-width: 333px; 
} 

可能會阻止，以及如果屏幕到達某個點允許它更改寬度。