當視圖較小時如何堆疊兩個內嵌圖像？

我試圖讓兩個內聯圖像堆棧隨着窗口大小變小。但是，我嘗試了幾件事，但沒有運氣。什麼是實現這一目標的最佳方式？這裏是我的代碼，我的工作：當視圖較小時如何堆疊兩個內嵌圖像？

<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>

以及相應的CSS：

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

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

這是他們的樣子在一個正常的窗口，但我希望他們堆在一個頂部另一個更小。

來源

2016-07-26 mur7ay

媒體查詢... –

除非您正在討論您希望發生的_specific_視口大小，否則您的示例都已準備好您所描述的行爲。 – vanburen

謝謝你們。我喜歡進入媒體查詢，並將在未來考慮到這一點。 @vanburen - 我從你的評論中發現，除了向班級添加容器液之外，沒有什麼必須改變。 – mur7ay

我能夠這樣做是爲了得到它：

<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>

所以我只是說'container-fluid'每個DIV類。

來源

2016-07-26 15:03:00 mur7ay

您可能想要舉例說明'容器流體'的作用，如果您使用的框架也聲明除了使用標籤之外，讓其他用戶更清楚地發現這個問題。 –

當視圖較小時如何堆疊兩個內嵌圖像？

回答

相關問題