Javascript 反应灵敏的引导库即将退出div

我有一个从父分区出来的图库，我无法在所有媒体屏幕中对图像进行排序，以使其留在该分区中，这是一个屏幕截图和一个代码片段

画廊

---

我需要首先对所有这些图像进行排序，以保留在该div中（如网格），然后使用jQuery在较小的媒体屏幕上扩展div，而不使用CSS，这很难说。但它们看起来像是漂浮的。如果在这种情况下，您可能会遇到clearfix问题，其中包含的div不会使用浮动项展开

资料来源：

---

使用css（clearfix）执行类似操作。您可以在以后使用javascript按任何方式排序，它们将根据您的需要浮动。您还可以同时执行内联块和消除浮点的必要性

#gallery{填充顶部：50px；颜色：000000；背景色：DCDCDC；边框：1px实心；}
ul{填充：0；列表样式：无；}

画廊

你能分享你的CSS吗？#gallery{填充顶部：50px；高度：500px；颜色：#000000；背景色：#DCDCDC；边框：1px solid；}所有其他CSS属性都在引导中“lazy”类用于jQuery惰性加载插件从CSS中删除

高度：500px

，它应该可以工作。移除高度：500px，并将col-xs-4更改为col-xs-6。

 <div id="gallery" class="container-fluid">
 <h1><kbd>Gallery</kbd></h1>
 <div class="container">   
<ul> 
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/1.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/2.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/3.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/4.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/5.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/6.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/7.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/8.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/9.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/10.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/11.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/12.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/13.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/14.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/15.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/16.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/17.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/18.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/19.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/20.png" width="150" height="150"> </li>
</ul>
  </div>
  </div>

ul::after {
    content: '';
    clear: both;
    display: table;
}