移動設備上Bootstrap網格產品組合的問題

我試圖讓我的Bootstrap產品組合圖片庫在全尺寸上顯示4個圖像，在平板電腦尺寸上顯示爲4，在手機尺寸上顯示爲1。我已經爲此工作了兩天（是的，我是一個新手），我無法解決問題。該畫廊最初使用過濾器（Bootstrap，Wordpress，HTML等），但我刪除了他們，以便在手機上獲得一個堆疊畫廊。至於我可以告訴大家，答案是在UL類下面的代碼：移動設備上Bootstrap網格產品組合的問題

<section id="portfolio" class="container"> 
    <ul class="portfolio-items col-4"> 
     <li class="portfolio-item"> 
      <div class="item-inner"> 
       <img src="images/portfolio/thumb/item1.jpg" alt=""> 
       <h5>Coble & Associates</h5> 
       <div class="overlay"> 
       <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>    
        <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>    
       </div>

我的畫廊設置爲任何多列，我想通過簡單地改變COL-4列6等，但無論我改變它，這就是我在移動大小上獲得的列數。有人告訴我，我可以像使用col-sm-1 col-lg-4一樣使用代碼，這確實給了我一個手機大小的列，但是，它也給了我一個完整瀏覽器大小的列。

我試過每個組合都有，但它只是不工作。任何人都可以指向正確的方向，你需要看看我的CSS文件嗎？您可以在我的現場網站http://www.prodesignnc.com/portfolio.html查看源代碼，如有任何幫助，我們將不勝感激。謝謝。大衛

Edit 

<section id="portfolio" class="container"> 
    <ul class="portfolio-items row"> 
<li class="portfolio-item col-lg-4 col-md-6 col-sm-12"> 
     <div class="item-inner"> 

       <img src="images/portfolio/thumb/item1.jpg" alt=""> 
       <h5>Coble & Associates</h5> 
       <div class="overlay"> 
       <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>    
        <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>    
       </div>   
      </div>   
     </li><!--/.portfolio-item--> 
     <li class="portfolio-item"> 
      <div class="item-inner"> 
       <img src="images/portfolio/thumb/item2.jpg" alt=""> 
       <h5>Herring & Mills</h5> 
       <div class="overlay"> 
        <a class="preview btn btn-danger" href="images/portfolio/full/item2.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>    
       </div>   
      </div>   
     </li><!--/.portfolio-item--> 
     <li class="portfolio-item"> 
      <div class="item-inner"> 
       <img src="images/portfolio/thumb/item3.jpg" alt=""> 
       <h5>YCL Project</h5> 
       <div class="overlay"> 
        <a class="preview btn btn-danger" href="images/portfolio/full/item3.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>   
       </div>   
      </div>   
     </li><!--/.portfolio-item--> 
     <li class="portfolio-item"> 
      <div class="item-inner"> 
       <img src="images/portfolio/thumb/item8.jpg" alt=""> 
       <h5>National Coaches Day</h5> 
       <div class="overlay"> 
        <a class="preview btn btn-danger" href="images/portfolio/full/item8.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>   
       </div>   
      </div>   
     </li><!--/.portfolio-item-->

來源

2015-01-07 Daveontrak

每個portfolio item應該是一個col-*和portfolio-items應該是一個行..

演示：http://www.bootply.com/render/IuF5rpPzOy

代碼：http://www.bootply.com/IuF5rpPzOy

來源

2015-01-07 14:49:02 ZimSystem

斯凱利，這工作得如此完美，我可以多吻你的嘴脣上:-)我有一個更小的問題，儘管這讓我完全摸不着頭腦。大拇指尺寸完全相同，但由於某種原因，第一個大小顯示爲稍微不同的大小，它使我的整個頁面佈局混亂了一點。有什麼想到這一點？ – Daveontrak

已修復。我認爲服務器上有一個更大的圖像，當我上傳新頁面時，圖像沒有被覆蓋。今天的世界都很好！ – Daveontrak

我相信你UL需要有一流的「行」，然後你的列類添加到每個L1。嘗試是這樣的：

<ul class="portfolio-items row"> 
    <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">

COL-LG-4是用於在大顯示器3列， COL-MD-6是用於在介質的顯示器2列， COL-SM-12是用於1列上小顯示器

來源

2015-01-07 14:48:48

移動設備上Bootstrap網格產品組合的問題

回答

相關問題