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

Bootstrap居中奇怪的缩略图

1 个答案: