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

-1

我已经使用灯箱2为我的引导程序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

来源

2015-06-20 user3465377

引导使用12列网格。你的前三列使用了col-lg-3，col-lg-3和col-lg-9。现在3 + 3 + 9等于什么？ – CBroe

看来你的链接，引导，或者您在使用引导的副本是无效的。也许画廊以某种方式禁用或压倒其风格。在这两种情况下，如果你

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

实例代替

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

它会工作：

<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>

来源

2015-06-20 23:49:04 oMiKeY

它适合您的建议。非常感谢。 – user3465377

它适合您的答案。感谢您的建议。 – user3465377

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

回答

相关问题