2016-07-26 9 views
0

Ich versuche, zwei Inline-Bilderstapel zu haben, da die Fenstergröße kleiner wird. Allerdings habe ich mehrere Dinge ohne Glück versucht. Was ist der beste Weg, dies zu erreichen? Hier ist mein Code, ich arbeite mit:Wie stapelt man zwei Inline-Bilder, wenn die Ansicht kleiner ist?

<div class="coming"> 
    <div class="logos"> 
     <img src="appstore.png" class="img-responsive"> 
    </div> 
    <div class="logos"> 
     <img src="googleplay.png" class="img-responsive"> 
    </div> 
</div> 

und die entsprechenden CSS:

.coming { 
    width: 100%; 
    height: 20%; 
    overflow: hidden; 
    text-align: center; 
} 

.logos { 
    display: inline-block; 
    margin-top: 2.5%; 
} 

Dies ist, was sie wie in einem normalen Fenster schauen, aber ich möchte, dass sie auf der Spitze eines stapeln ein anderes wenn kleiner. Habe ich nur noch 'container-fluid' zu jedem div class

<div class="coming"> 
    <div class="apple_logo container-fluid"> 
     <img src="appstore.png" class="img-responsive"> 
    </div> 
    <div class="apple_logo container-fluid"> 
     <img src="googleplay.png" class="img-responsive"> 
    </div> 
</div> 

So:

+2

Medienabfragen ... –

+1

Sofern Sie nicht über eine _spezielle_ Darstellungsfeldgröße sprechen, möchten Sie, dass dies geschieht. Ihr Beispiel, alles bereit, hat das von Ihnen beschriebene Verhalten. – vanburen

+0

Danke Jungs. Ich mochte es in Medienanfragen und werde dies in Zukunft berücksichtigen. @vanburen - Ich habe aus deinem Kommentar herausgefunden, dass sich nichts ändern muss, außer dass man der Klasse Containerflüssigkeit hinzugefügt hat. – mur7ay

Antwort

0

Ich war in der Lage, es zu erhalten, indem dies zu tun.

+0

Sie können ein Beispiel dafür geben, was 'container-fluid' tut, wenn Sie ein Framework verwenden, das auch außerhalb von Tags angibt, dass es anderen Benutzern, die diese Frage finden, bessere Klarheit gibt. –

Verwandte Themen