如何维护符合 Zurb Foundation 3 框架的 div

Question

我有一个 12 列的行，但我需要在一行中获取一系列 div 块（4 个 div 容器）以响应并且在它到达适当的断点之前不堆叠。现在，随着浏览器变小，div 开始堆叠。

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>

我已经尝试使用 display: inline 和 display: inline-block 用于单个 div 以及 .button-container。

这是我的最新款式：

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

我的建议是，在您将视口缩小到足以弹出 [div4] 之后 在 [div1] 下是放入一个媒体查询，将减少/删除边距/填充。