Html 引导-流向第二行的图标行（使其响应）

我正在使用bootstrap4，并试图创建一个（响应）行，其中有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>

在宽屏幕上，图标保持在一行中

但是，随着窗口宽度的减小，我希望图标开始一次一个地落到第二行（从右端的图标开始）

目前，他们只是保持现状，因为后面的东西宽度减小了。 （它们基本上看起来像是从容器中溢出。它们没有流动性/响应性）

见下文：

---

您可以从以下解决方案开始：

 .col-md-1 { display: inline-block } 

或者这个完全不同的解决方案

 .col-md-1 { float:left } 

变,

.app-container { width:1050px; } 

到

---

只需将

.container

类添加到您的

.app container

div中，就可以了。以下是引导列的基本布局：

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

希望这有帮助

在.app container div中的div=“行”之前添加div=“container”

---

使用引导网格的最终解决方案

.app-container{max-width: 1050px;}
.col-md-1{border:1px solid #ccc;}

<div class="row">
<div class="app-container">
    <div class="col-md-1 col-sm-2 col-xs-3">1</div>
    <div class="col-md-1 col-sm-2 col-xs-3">2</div>
    <div class="col-md-1 col-sm-2 col-xs-3">3</div>
    <div class="col-md-1 col-sm-2 col-xs-3">4</div>
    <div class="col-md-1 col-sm-2 col-xs-3">5</div>
    <div class="col-md-1 col-sm-2 col-xs-3">6</div>
    <div class="col-md-1 col-sm-2 col-xs-3">7</div>
    <div class="col-md-1 col-sm-2 col-xs-3">8</div>  
    <div class="col-md-1 col-sm-2 col-xs-3">9</div>
    <div class="col-md-1 col-sm-2 col-xs-3">10</div>    
    <div class="col-md-1 col-sm-2 col-xs-3">11</div>
    <div class="col-md-1 col-sm-2 col-xs-3">12</div>
</div>

.app容器{最大宽度：1050px；}
.col-md-1{边框：1px实心#ccc；}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

.应用程序容器{
最大宽度：1050px；
}
.a{
显示：内联块；
浮动：左；
宽度：100px；
高度：100px；
}
.a img{
宽度：80px；
高度：80px；
}
…x 12

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

---

只需在每个

col-1

上设置一个

minwidth

。不要使用

col-md-1

，因为它们都将以

992px

而不是“一次一列”进行叠加。

这里必须使用自定义布局，因为列是父列，它们的固定百分比加起来等于100%。所以你必须让它成为一个可变宽度的自定义布局。好吧，我试试这个。我把这个添加到了类中，但它们仍然保持在同一条线上。仍然没有改变它只是工作可能你错过了一些东西，所以你必须使用适当的引导类使它响应任何方式我更新它试试这个@TimothyAURAYes，这就是我要找的，我会玩一玩，然后再给你回复。

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

.app-container{max-width: 1050px;}
.col-md-1{border:1px solid #ccc;}

<div class="row">
<div class="app-container">
    <div class="col-md-1 col-sm-2 col-xs-3">1</div>
    <div class="col-md-1 col-sm-2 col-xs-3">2</div>
    <div class="col-md-1 col-sm-2 col-xs-3">3</div>
    <div class="col-md-1 col-sm-2 col-xs-3">4</div>
    <div class="col-md-1 col-sm-2 col-xs-3">5</div>
    <div class="col-md-1 col-sm-2 col-xs-3">6</div>
    <div class="col-md-1 col-sm-2 col-xs-3">7</div>
    <div class="col-md-1 col-sm-2 col-xs-3">8</div>  
    <div class="col-md-1 col-sm-2 col-xs-3">9</div>
    <div class="col-md-1 col-sm-2 col-xs-3">10</div>    
    <div class="col-md-1 col-sm-2 col-xs-3">11</div>
    <div class="col-md-1 col-sm-2 col-xs-3">12</div>
</div>

  <style>
   .app-container{
       max-width : 1050px;
   }
   .a{
      display: inline-block;
      float : left;
      width : 100px;
      height : 100px;

   }
   .a img{
       width :80px;
       height : 80px;
   }
   </style>
   <div class="app-container">
    <div class="row">
       <div class="a">
          <a class="" href="https://www.xxx.org.au">
           <img class="" src="/images/web-1.png" alt="">
          </a>
       </div>
        ...x 12
    </div>
  </div>

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