Boostrap投資組合項目不集中

我正在推進圖像庫，應該能夠洗牌的圖像項目：http://demo.acasaprogramming.ro/shuffle-portfolio/#。

現在我只是試圖讓畫廊工作，沒有洗牌功能，但我遇到了一個花了很多時間試圖解決的問題。

我的畫廊中的項目有點被推到一邊，我已經嘗試了很多東西，包括：text-align：center。將填充設置爲全部相同，margin-right：auto; margin-left：auto; ....我不知道我在做什麼錯誤..

我附上了一張picture or my screen，並且如圖所示，左側的圖像一直顯示邊界 - 我想在容器中的所有項目：/

我說我的HTML文檔的小部分 - 希望這是足夠的（它是所有的圖片相同的代碼）

body 
 
    { 
 
    background-color: #f1f5f8; 
 
    border-top: 10px solid #2980b9; 
 
    } 
 
    
 
    .portfolio 
 
    { 
 
    margin: 48px 0; 
 
    } 
 
    
 
    .portfolio-sorting 
 
    { 
 
    text-transform: uppercase; 
 
    font-size: 16px; 
 
    margin-bottom: 48px; 
 

 

 
    } 
 

 
    
 
    .portfolio-sorting li a 
 
    { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    padding: 6px; 
 
    } 
 

 
    .portfolio-sorting li a:hover, 
 
    .portfolio-sorting li a.active 
 
    { 
 
    color: #2980b9; 
 
    border-bottom: 2px solid #2980b9; 
 
    }

<section class="portfolio"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
    
 
      <ul class="portfolio-sorting list-inline text-center"> 
 
      <li><a href="#" data-group="all" class="active">All</a></li> 
 
      <li><a href="#" data-group="people">People</a></li> 
 
      <li><a href="#" data-group="simpsons">Simpsons</a></li> 
 
      <li><a href="#" data-group="futurama">Futurama</a></li> 
 
      </ul> <!--end portfolio sorting --> 
 
    
 
    
 
    
 
      <ul class="portfolio-items list-unstyled" id="grid"> 
 
    
 
      <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["people"]'> 
 
       <figure class="portfolio-item"> 
 
       <a href="#"> 
 
        <img src="http://lorempixel.com/700/400/people/1" alt="Item 1" 
 
        class="img-responsive"> 
 
       </a> 
 
       </figure> 
 
      </li> 
 
    
 
      <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["people"]'> 
 
       <figure class="portfolio-item"> 
 
        <a href="#"> 
 
         <img src="http://lorempixel.com/700/400/people/7" alt="" 
 
         class="img-responsive"> 
 
        </a> 
 
       </figure> 
 
      </li> 
 
    </ul> <!--end portfolio grid --> 
 
    
 
    
 
      </div> <!--end row --> 
 
     </div> <!-- end container--> 
 
    </section>

來源

2017-10-12 Maria

自舉元素（例如col-xs-4）有float屬性，默認設置爲left。

你必須浮動設定：無和顯示：內聯塊到那些元素。父

而且文本對齊中心：

.portfolio-items { 
    text-align: center; 
} 

.portfolio-items > li { 
    display: inline-block; 
    float: none; 
}

工作例如：https://jsfiddle.net/cr29y1tc/24/

來源

2017-10-12 14:16:50

enter image description here

對不起。這裏是屏幕的圖片

來源

2017-10-12 14:06:25 Maria

您的問題是與中心柱和3D轉換。

<ul class="portfolio-items center-block list-unstyled shuffle" id="grid" style="position: relative; overflow: hidden; height: 707.109px; transition: height 250ms ease-out;"> 

      <li class="col-md-4 col-sm-4 center-block col-xs-6 shuffle-item filtered" data-groups="[&quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; transition: transform 250ms ease-out, opacity 250ms ease-out; opacity: 1; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);"> 
       <figure class="portfolio-item"> 
       <a href="#"> 
        <img src="http://lorempixel.com/700/400/people/1" alt="Item 1" class="img-responsive"> 
       </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempixel.com/700/400/people/7" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;futurama&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/futurama/700/400/1" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;futurama&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/futurama/700/400/2" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;simpsons&quot;, &quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(0px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/simpsons/700/400/1" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;simpsons&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/simpsons/700/400/3" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-blockcol-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 266px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempixel.com/700/400/people/9" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;simpsons&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/simpsons/700/400/4" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;futurama&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(0px, 471px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/futurama/700/400/5" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 


      <!-- sizer --> 
      <li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer shuffle-item filtered" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 471px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"></li> 


      </ul>

您在兩列中有額外的30像素頂部和60像素頂部。這只是您提供的網站鏈接的開始。

來源

2017-10-12 14:21:22 Lavevel

Boostrap投資組合項目不集中

回答

相關問題