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>

我还附上了它的截图：

the thumbnails are supposed to line up horizentlly

Answer 1

似乎您的引导程序链接或您正在使用的引导程序副本无效。也许画廊以某种方式禁用或覆盖其风格。在任何一种情况下，如果你替换

它将起作用

 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>

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

1 个答案: