如何在 bootstrap 中将五列排成一行？

Question

我为每一列分配了 width:20%，它对当前屏幕尺寸是正确的，我怎样才能让它响应所有屏幕尺寸。我在这里创建了一个 fiddle。请帮助我使该行具有五列响应。

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

让我们看看这个fiddle：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%;
}

Updated fiddle

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

如何在 bootstrap 中将五列排成一行？

How to make five columns in one row in bootstrap?

html

css

flexbox

twitter-bootstrap-4