如何在bootstrap中一行五列？[副本]

Question

我给了每列20%的宽度，使其适合当前屏幕大小，如何使其对所有屏幕大小都有响应。我在这里创作了一把小提琴。请帮助我使行具有五列响应。

html

<div class="container"><div class="row">
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>
            <i class="icon-close sprite"></i>
        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
</div>
</div>

CSS

.add_more_images .grid-five{
  width:20%;
}

Answer 1

让我们看看这个小提琴：https://jsfiddle.net/ash06229/fng2zpbn/

.add_more_images .grid-five{
  min-width:320px;
  width: 20%;
}

.add_more_images .grid-five img {
  width: 100%;
}

.add_more_images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

Answer 2

要使图像具有响应性，您需要给它们一个宽度，在本例中width:100%

.grid-five {
  width: 20%;
}
.grid-five img {
  width: 100%;
}

更新小提琴

.grid-five {
  width: 20%;
}

.grid-five img {
  width: 100%;
}


/* for styling this demo */

.grid-five {
  border: 2px dotted red;
  box-sizing: border-box;
}

.grid-five + .grid-five {
  border-left: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="grid-five">
      <div class="image-thumb">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>
        <i class="icon-close sprite"></i>
      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
    <div class="grid-five">
      <div class="image-thumb overlay">
        <figure>
          <img src="https://www.w3schools.com/html/pic_mountain.jpg">
        </figure>

      </div>
    </div>
  </div>
</div>