Question

我为每列提供了宽度：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

要使图像响应，您需要为它们指定宽度，在本例中为mainApp.factory('StudentServices', ['$http', '$rootScope','baseUrl', function ($http, $rootScope, baseUrl) {

width: 100%

Updated fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

让我们看看这个小提琴：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;
}

如何在bootstrap中一行制作五列？

2 个答案: