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>

班级＆＃34; app-container＆＃34;有一个样式属性：

.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

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

Answer 2

您可以从这个解决方案开始：

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

或这个非常不同的解决方案

 .col-md-1 { float:left }

Answer 3

更改，

.app-container { width:1050px; }

到

.app-container { max-width:1050px; width:100%;}

Answer 4

只需将.container课程添加到.app-container div。这应该够了吧。这是Bootstrap列的基本布局：

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

希望这有帮助！

Answer 5

添加div =＆＃34;容器＆＃34;在div =＆＃34; row＆＃34;之前在.app-container div。

Answer 6

使用Bootstrap Grid的最终解决方案

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

Answer 7

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

Bootstrap - 流向第二行的图标行（使响应）

7 个答案: