Boostrap投资组合项目不集中

Question

Hej！

我正在推进图像库，应该能够洗牌的图像项目：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> 
 

Answer 1

自举元素（例如col-xs-4）有float属性，默认设置为left。

你必须浮动设定：无和显示：内联块到那些元素。父

而且文本对齐中心：

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

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

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

Answer 2

enter image description here

对不起。这里是屏幕的图片

Answer 3

您的问题是与中心柱和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像素顶部。这只是您提供的网站链接的开始。