が複数、比例写真の100％でTwitterのブートストラップ・ロウに並んで幅

Question

を取得し、私は、行の中に水平に表示しようとしている7つのイメージを持っています。私はこれを書くためにブートストラップを使用しています。私は何を達成しようとしていることは、次のようになります。

ページのサイズが変更されますと、それらが崩壊必要がある場合、これらの画像は、最終的にはモバイル（以下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>