響應式引導程序庫走出div

我有一個走出父級div的庫，我無法對圖像進行排序以保留在所有媒體屏幕中的div中，這裏有一個屏幕截圖和一個代碼段。響應式引導程序庫走出div

http://i.imgur.com/wLeoRPa.jpg

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

我首先需要排序的所有圖像留在該分區（如網格），然後使jQuery來在較小的媒體屏幕

來源

2015-09-23 tehn0drom

你能分享你的CSS嗎？ –

#gallery {padding-top：50px; height：500px; color：＃000000; background-color：#DCDCDC;邊框：1px實體;} 所有其他CSS屬性在引導「懶」類用於jQuery懶加載插件 – tehn0drom

嘗試從CSS中刪除'高度：500px'，它應該工作。 –

沒有CSS擴展DIV，這很難說。但他們看起來像是浮動的。如果在這種情況下，您可能會遇到clearfix問題，其中包含的div不會使用浮動項目進行擴展。

來源： http://learnlayout.com/clearfix.html

來源

2015-09-23 20:22:27

做這樣的事情的CSS（clearfix）。之後您可以使用JavaScript以任何方式進行排序，但無論您需要它們，它們都會浮動。你也可以做內聯塊，並一起去除浮動的必要性。

https://jsfiddle.net/calebswank/5cxnq6zy/

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

來源

2015-09-23 20:25:46

#gallery {padding-top:50px;color: #000000; background-color: #DCDCDC; border: 1px solid;} 
 
ul {padding:0;list-style: none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<div id="gallery" class="container-fluid"> 
 
<h1><kbd>Gallery</kbd></h1> 
 
<div class="container"> 
 
<ul class="text-center"> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <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-6"> <img class="lazy" data-original="images/galerija/20.png" width="150" height="150"> </li> 
 
</ul> 
 
    </div> 
 
    </div><br>

檢查這個片斷全頁視圖。

來源

2015-09-24 04:18:37

響應式引導程序庫走出div

回答

相關問題