获取多个比例图像肩并肩在100％宽度的Twitter-Bootstrap行

Question

我有7个图像，我试图在一行内水平显示。我使用bootstrap来写这个。我正在努力实现应该是这样的：

当网页被调整，这些图像应保持适度彼此，直到最终在移动（425px及以下），当他们要崩溃分成1列的行。

我试过到目前为止是这样的：

HTML：

<div class="row thumbnail-row"> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg"/> 
</div> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg"/> 
</div> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg"/> 
</div> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg"/> 
</div> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg"/> 
</div> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg"/> 
</div> 
<div> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg"/> 
</div> 
</div><!--end row--> 

CSS：

.thumbnail-row { 
display: flex; 
} 

.thumbnail-image { 
display: inline-block; 
/*width: 14.286%;*/ 
/*height: 50px;*/ 
} 

当我这样做，它得到的图像彼此相邻，但是它们太宽而且不适合页面/窗口的宽度。

看到这个jsfiddle。

也试过这样：

CSS：

.thumbnail-row { 
display: flex; 
overflow: hidden; 
} 

.thumbnail-image { 
width: 14.286%; 
float: left; 
} 

但得到了一个坏的结果。有任何想法吗？

Answer 1

将max-width: 100%添加到图像，他们将显示在水平行。如果没有这些，他们会溢出父母。然后你就可以在断点使用col-*类重组为列，或者只是使用@media查询及开关的flex-direction

.thumbnail-row { 
 
    display: flex; 
 
} 
 

 
.thumbnail-image { 
 
    display: inline-block; 
 
    /*width: 14.286%;*/ 
 
    /*height: 50px;*/ 
 
    max-width: 100%; 
 
} 
 

 
@media (max-width: 425px) { 
 
    .thumbnail-row { 
 
    flex-direction: column; 
 
    } 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
    <div class="row thumbnail-row"> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/DgNt5MQ.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/SG0bpMU.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/x1DxQwd.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img class="thumbnail-image" src="http://i.imgur.com/YcnOqR1.jpg" /> 
 
    </div> 
 
    </div> 
 
    <!--end row--> 
 
</div>