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>

而 class "app-container" 有一种风格属性:

.app-container {
  width:1050px;
}

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

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

目前它们只是保持原样，因为后面的东西宽度减小了。（它们基本上看起来像是溢出到它们所在的容器之外。它们不是 fluid/responsive）。

见下文：

Answer 1

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

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

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

 .col-md-1 { float:left }

Answer 2

改变，

.app-container { width:1050px; }

至

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

Answer 3

只需将 .container class 添加到 .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 4

在 .app-container div.

Answer 5

使用 Bootstrap 网格的最终解决方案

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

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

Answer 7

最简单的解决方案 是使用 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 而不是 "one at a time".

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

Bootstrap - Row of icons to flow to second line (make responsive)

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4