html - 如何在有 4 个 img 的 bootstrap(col xs-12 col-sm-6 col-md-2 col-lg-2) 中居中一行？

Question

我尝试了很多不同的解决方案:将类中心 block 添加到“行”，将“行”包装在 .我只想有 4 个 imges，居中，但它们被移到了左边。请帮助我，我的错误是什么？谢谢。

<div class = "row center-block">
    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt="tea">
        </a>
            <div class = "desc">1</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive"  alt="Посуда">
        </a>
            <div class = "desc">2</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive">
        </a>
        <div class = "desc">3</div>
            </div>

    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt=" ">
        </a>
            <div class = "desc">4</div>
    </div>
</div>

Answer 1

我想这就是你想要的。请注意，如果较大的尺寸相同，则只需指定较小的尺寸。您不需要 col-lg-2，因为 col-md-2 覆盖了 md 一侧及上方。我添加的只是 col-md-offset-2，它将第 2 列移到上方。您有 8 列 (2x4)，总共有 12 列。所以 12-8 = 4。如果你想让它居中，那么你想把它分开，所以 4/2 = 2。

<div class = "row center-block">
    <div class = "col xs-12 col-sm-6 col-md-2 col-md-offset-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt="tea">
        </a>
            <div class = "desc">1</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive"  alt="Посуда">
        </a>
            <div class = "desc">2</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive">
        </a>
        <div class = "desc">3</div>
            </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt=" ">
        </a>
            <div class = "desc">4</div>
    </div>
</div>

如果您希望它们在所有屏幕尺寸下均匀分布在整行中，您需要研究 flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/