Bootstrap居中奇怪的縮略圖

我想中心一些生成的縮略圖在一行中。問題是，我不知道縮略圖的數量，我會得到這麼...我需要一個靈活的解決方案...我嘗試了中心塊類，但這是行不通的。Bootstrap居中奇怪的縮略圖

下面是可用於顯示我的問題的個例片段（儘量居中下的第一行第四縮略圖）： http://www.bootply.com/663prFgvlL

而且我下面的HTML：

<div class="col-md-3 col-sm-6 thumb"> 
    <div class="view view-first"> 
     <a href="/photologue/photo/mdl-5/"> 
      <img class="img-portfolio img-responsive" title="MDL 5" src="/media/photologue/photos/cache/MDL_6_thumbnail.jpg" alt="portfolio MDL 5"> 
     </a> 
     <div class="mask"> 

       <h4><a href="/photologue/photo/mdl-5/" class="info">MDL 5</a></h4> 
       <p class="muted"><small>Publiée le 13 avril 2016 16:53</small></p> 

     </div> 
    </div> 
</div> 

<div class="col-md-3 col-sm-6 thumb"> 
    <div class="view view-first"> 
     <a href="/photologue/photo/mdl-4/"> 
      <img class="img-portfolio img-responsive" title="MDL 4" src="/media/photologue/photos/cache/MDL_5_thumbnail.jpg" alt="portfolio MDL 4"> 
     </a> 
     <div class="mask"> 

       <h4><a href="/photologue/photo/mdl-4/" class="info">MDL 4</a></h4> 
       <p class="muted"><small>Publiée le 13 avril 2016 16:52</small></p> 

     </div> 
    </div> 
</div> 

<div class="col-md-3 col-sm-6 thumb"> 
    <div class="view view-first"> 
     <a href="/photologue/photo/mdl-3/"> 
      <img class="img-portfolio img-responsive" title="MDL 3" src="/media/photologue/photos/cache/MDL_4_thumbnail.jpg" alt="portfolio MDL 3"> 
     </a> 
     <div class="mask"> 

       <h4><a href="/photologue/photo/mdl-3/" class="info">MDL 3</a></h4> 
       <p class="muted"><small>Publiée le 13 avril 2016 16:51</small></p> 

     </div> 
    </div> 
</div> 

<div class="col-md-3 col-sm-6 thumb"> 
    <div class="view view-first"> 
     <a href="/photologue/photo/mdl-2/"> 
      <img class="img-portfolio img-responsive" title="MDL 2" src="/media/photologue/photos/cache/MDL_3_thumbnail.jpg" alt="portfolio MDL 2"> 
     </a> 
     <div class="mask"> 

       <h4><a href="/photologue/photo/mdl-2/" class="info">MDL 2</a></h4> 
       <p class="muted"><small>Publiée le 13 avril 2016 16:51</small></p> 

     </div> 
    </div> 
</div> 

<div class="col-md-3 col-sm-6 thumb"> 
    <div class="view view-first"> 
     <a href="/photologue/photo/mdl-1/"> 
      <img class="img-portfolio img-responsive" title="MDL 1" src="/media/photologue/photos/cache/MDL_1_thumbnail.jpg" alt="portfolio MDL 1"> 
     </a> 
     <div class="mask"> 

       <h4><a href="/photologue/photo/mdl-1/" class="info">MDL 1</a></h4> 
       <p class="muted"><small>Publiée le 13 avril 2016 16:50</small></p> 

     </div> 
    </div> 
</div> 

<div class="col-md-3 col-sm-6 thumb"> 
    <div class="view view-first"> 
     <a href="/photologue/photo/plan-mdl/"> 
      <img class="img-portfolio img-responsive" title="Plan MDL" src="/media/photologue/photos/cache/Plan_amenagement_couleurs_thumbnail.jpg" alt="portfolio Plan MDL"> 
     </a> 
     <div class="mask"> 

       <h4><a href="/photologue/photo/plan-mdl/" class="info">Plan MDL</a></h4> 
       <p class="muted"><small>Publiée le 13 avril 2016 16:50</small></p> 

     </div> 
    </div> 
</div>

我我只想把最後一個拇指放在網格上......我認爲這很簡單，但是......我被卡住了......！

在此先感謝您的幫助！

來源

2016-04-21 Lcab

好的，我應該試着在問一下之前多搜索一下....！

得到了我的答案在這裏：

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

只需要：

<div class="container"> 
    <div class="row row-centered"> 
     <div class="col-xs-6 col-centered"></div> 
     <div class="col-xs-6 col-centered"></div> 
     <div class="col-xs-3 col-centered"></div> 
     <div class="col-xs-3 col-centered"></div> 
     <div class="col-xs-3 col-centered"></div> 
    </div> 
</div>

和CSS：

/* centered columns styles */ 
.row-centered { 
    text-align:center; 
} 
.col-centered { 
    display:inline-block; 
    float:none; 
    /* reset the text-align */ 
    text-align:left; 
    /* inline-block space fix */ 
    margin-right:-4px; 
}

來源

2016-04-22 01:23:48 Lcab

Bootstrap居中奇怪的縮略圖

回答

相關問題