獲取多個比例圖像肩並肩在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>