Bootstrap 3-元素的奇怪對齊

Question

我在循環中加載圖像以顯示縮略圖。 你可以在這里看到它。

在Chrome，Opera甚至IE中，一切看起來都不錯。 但是，當您在Firefox中打開它時，第一部分中的一張圖片會掉下來，並且圖片之間存在間隙。

對於第二部分中的類似圖像集，一切正常。

Answer 1

刪除填充：

.fl-photo-thumb {
    /*padding: 10px;*/
}

試試這個代碼：

<div class="row" style="margin: 0px;">
    <a href="/gallery/600_7_1365087278.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087278.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087306.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087306.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087333.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087333.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087365.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087365.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087400.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087400.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087435.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087435.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087456.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087456.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
    <a href="/gallery/600_7_1365087481.jpg" title="zajęcia mama i dziecko" class="col-sm-2 col-md-2 fl-photo-thumb">
        <img src="/gallery/600_7_1365087481.jpg" class="img-responsive" alt="Kliknij aby powiększyć" title="Kliknij aby powiększyć">
    </a>
</div>

Answer 2

請使用下面的代碼並檢查

<div style="margin: 0px;" class="row">
    <a class="col-sm-2 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087278.jpg">
        <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087278.jpg">
    </a>
    <a class="col-sm-2 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087306.jpg">
        <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087306.jpg">
    </a>
    <a class="col-sm-2 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087333.jpg">
        <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087333.jpg">
    </a>
    <a class="col-sm-2 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087365.jpg">
        <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087365.jpg">
    </a>
    <div class="col-sm-4">
        <div class="row">    
            <a class="col-sm-6 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087400.jpg">
                <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087400.jpg">
            </a>
            <a class="col-sm-6 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087435.jpg">
                <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087435.jpg">
            </a>
        </div>
        <div class="row">    
            <a class="col-sm-6 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087456.jpg">
                <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087456.jpg">
            </a>
            <a class="col-sm-6 fl-photo-thumb" title="zajęcia mama i dziecko" href="/gallery/600_7_1365087481.jpg">
                <img title="Kliknij aby powiększyć" alt="Kliknij aby powiększyć" class="img-responsive col-xs-12" src="/gallery/600_7_1365087481.jpg">
            </a>
        </div>
    </div>
</div>