2016-04-21 5 views
0

生成されたサムネイルを中央に配置しようとしています。問題は、私が得るサムネイルの数が分からないということです。柔軟な解決策が必要です...センターブロッククラスで試しましたが、これは機能しません。 http://www.bootply.com/663prFgvlLブートストラップセンタリング奇数サムネイル

そして、以下の私のHTML::ここで

は私の問題のexempleを表示するために利用可能なスニペット(最初の行の下に第四のサムネイルを中央にしてみてください)です

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

私は」グリッド上の最後の親指だけを中心にしているのを見ている...これはかなりシンプルだと思うけど...私はつまらない...!

ご協力いただきありがとうございます。

答えて

0

[OK]を私は少し質問をする前に検索しようとする必要があります....!

は、ここに私の答えを得た:

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

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

のみ持っているに

/* 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; 
}