缩略图未正确显示在灯箱图库中

Question

我使用灯箱 2 为我的 bootstrap 3 网页创建了一个画廊。缩略图排列不正确。它应该被视为一条水平线，但它显示为一条垂直线。除此之外，灯箱工作正常。下面是我的代码。

<body>
    <div class="container">
        <h3>Gallery</h3>        
        <div class="gallery">
            <div class="row">
                <div class "col-lg-3">  
                    <a href="img/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/1.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-3">  
                    <a href="img/2.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/2.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-9">  
                    <a href="img/3.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/3.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
            </div>
            <div class="row">
                <div class "col-lg-3">  
                    <a href="img/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/1.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-3">  
                    <a href="img/2.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/2.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
                <div class "col-lg-3">  
                    <a href="img/3.jpg" data-title="caption" data-lightbox="school">
                        <img src="img/3.jpg" width="200px" class="img-thumbnail"/>
                    </a> 
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/lightbox.min.js"></script>
</body>

我也附上它的截图：

Answer 1

您的 link 至 bootstrap 或您使用的 bootstrap 的副本似乎无效。也许画廊正在以某种方式禁用或覆盖其样式。在任何一种情况下，如果您替换

它都会起作用

 class="col-lg-2" // or the equivalent

和

 style="width:33%; display:inline-block"  // with the equivalent width

示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://stanford.edu/~nisham/bootstrap/js/bootstrap.js"></script>
<script src="http://xcounter.se/lightbox/js/lightbox.min.js"></script>
<body>
    <div class="container">
        
<h3>Gallery</h3>

        <div class="gallery">
            <div class="row">
                <div style="width:33%; display:inline-block"> <a href="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="https://www.rome2rio.com/images/rome2rio-2.png" data-title="caption" data-lightbox="school">
                        <img src="https://www.rome2rio.com/images/rome2rio-2.png" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
            </div>
            <div class="row">
                <div style="width:33%; display:inline-block"> <a href="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="https://www.rome2rio.com/images/rome2rio-2.png" data-title="caption" data-lightbox="school">
                        <img src="https://www.rome2rio.com/images/rome2rio-2.png" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
                <div style="width:33%; display:inline-block"> <a href="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" data-title="caption" data-lightbox="school">
                        <img src="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" width="200px" class="img-thumbnail"/>
                        </a> 
                </div>
            </div>
        </div>
    </div>
</body>

</html>

缩略图未正确显示在灯箱图库中

thumbnails are not properly shown in light box gallery

jquery

twitter-bootstrap

thumbnails

lightbox