引导对中奇数缩略图

Question

我正试着把一些生成的缩略图排成一排。问题是我不知道我会得到多少缩略图所以..。我需要一个灵活的解决方案。我试过用中间街区班，但这不管用。

下面是一个可以用来显示我的问题的例子的片段(试着将第4条缩略图放在第一行的中间)：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>

我只想把最后的拇指放在网格的中间.我觉得这很简单但是..。我卡住了..。好了！

提前感谢您的帮助！

Answer 1

好吧，我应该在问.之前再多找一点.好了！

我在这里得到了答案：

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