html - Bootstrap - 流向第二行的图标行(响应式)

Question

我正在使用 Bootstrap 4，并尝试创建一个包含 12 个图标的(响应式)行。

<div class="app-container">
<div class="row">

  <div class="col-md-1">
    <a class="" href="https://www.xxx.org.au">
      <img class="" src="/images/web-1.png" alt="">
    </a>
  </div>
  ... x 12

</div>
</div>

“app-container”类有一个样式属性:

.app-container {
  width:1050px;
}

在宽显示屏上，图标保持在一行中。

但是随着窗口宽度的减小，我希望图标一次开始落入第二行(从右端的图标开始)。

目前，它们只是保持原样，因为后面的东西宽度减少了。 (它们基本上看起来像是溢出到它们所在的容器之外。它们没有流动/响应)。

见下文:

Answer 1

最简单的解决方案是使用 Bootstrap 4 中内置的类。

http://www.codeply.com/go/MvnOs3GPCC

<div class="app-container">
    <div class="row">
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
        <div class="col-1">
            <a class="" href="https://www.xxx.org.au">
                <img class="" src="//placehold.it/60" alt="">
            </a>
        </div>
    </div>
</div>

Demo

只需在每个 col-1 上设置一个 min-width 即可。不要使用 col-md-1，因为它们都会以 992px 堆叠，而不是“一次一个”。