如何保持與Zurb基金會3框架div div

Question

我有一個12列的行，但我需要在一行內獲得一系列div塊（4 div容器）作出迴應，並不堆疊，直到它達到適當斷點。現在，隨着瀏覽器變小，divs開始堆疊。

Basically I have 4 divs. They need to be in a row. 
[div1] [div2] [div3] [div4] 

But when I shrink the browser I see: 
[div1] [div2] [div3] 
[div4] 

每個div在其中都有一個圖像。

這裏是我的代碼：

<div class="row"> 
    <div class="twelve columns center"> 
    <div class="button-container"> 
     <div class="calendar-container left hide-for-small"> 
     <img src="images/poc-calendar.jpg" /> 
     </div> 
     <div class="search-container left"> 
     <img src="images/poc-button-search.jpg" /> 
     </div> 
     <div class="submit-container left"> 
     <img src="images/poc-button-submit.jpg" /> 
     </div> 
     <div class="social-container left hide-for-small"> 
     <img src="images/poc-social.jpg" /> 
     </div> 
    </div> 
    </div> 
</div> 

我一直在使用顯示器的嘗試：inline和顯示：對個人的div inline-block的還有.button容器。

這是我最新的這個款式：

div.button-container { 
    margin-top: 18px; 
    padding-left: 10px; 
    max-height: 100%; 
    max-width: 100%; 
    display: inline-block; 
    width:100%; 
} 

div.calendar-container { 
    margin-right: 10px; 
} 

div.search-container { 
    margin-right: 10px; 
} 

div.submit-container { 
    margin-right: 10px; 
} 

div.legend-container { 
    height: 86px; 
} 

任何想法？提前致謝！

Answer 1

我的建議是，將視口縮小到足以彈出[div1]下的[div4] 將放入媒體查詢，以減少/刪除邊距/填充。