可堆叠媒体对象在 Foundation 中的行为不正确

Question

我有这样的结构：

<div class="grid-container fluid">
    <div class="grid-x grid-margin-x fluid" id="content">
        <div class="cell medium-offset-1 medium-7 small-12>
            <div class="content-section">
                <div class="media-object stack-for-small">
                    <div class="media-object-section"> # object1
                        <div class="thumbnail">
                            <img src="">
                        </div>
                   </div>
                   <div class="media-object-section"> # object 2
                   [....]      
                   </div>
                </div>
            </div>
        </div>

        <div class="cell medium-3 columns small-12">
        Upcoming events...
        </div>
    </div>
</div>

对于大屏幕和小屏幕，它按预期工作：可堆叠的项目堆叠在小屏幕上，大屏幕一个挨着另一个。问题是中型显示器，发生这种情况（这是 iPad）：

我是不是忽略了一些明显的东西？

Answer 1

默认情况下我们使用$-zf-zero-breakpoint（即small）并在那里编译CSS。这仅适用于小断点而不是中等断点。

见https://github.com/foundation/foundation-sites/blob/v6.6.3/scss/components/_media-object.scss#L66 and https://github.com/foundation/foundation-sites/blob/v6.6.3/scss/components/_media-object.scss#L36

如果你也需要它用于媒体，你可以使用 scss 版本并使用 media-object-stack mixin (https://get.foundation/sites/docs/media-object.html#media-object-stack) 生成所需的样式，或者创建所需的 CSS class 手动。

https://github.com/foundation/foundation-sites/blob/v6.6.3/dist/css/foundation.css#L3522

<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stackable objects issues</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
</head>

<body>
  <div class="grid-container fluid">

    <div class="grid-x grid-margin-x" id="content">

      <div class="cell medium-offset-1 medium-7 small-12">

        <div class="content-section">
          <div class="media-object stack-for-small stack-for-medium">
            <div class="media-object-section">
              <img alt="alternative" src="http://151.236.37.122/media/profile_pics/P1070640b_Yrjhmqh.jpg">

            </div>
            <div class="media-object-section">
              <h3 class="profile-heading">Jonny Smith</h3>
              <h5 class="subheader">Educator, Perfor&shy;mer (indiv&shy;idual), Project manage&shy;ment / Production</h5>
            </div>
          </div>
        </div>
      </div>

      <div class="cell medium-3 small-12">

        <div class="callout small">

          <h5>Upcoming events</h5>

          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </div>

      </div>

    </div>

  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
  <script>
    $(document).foundation();
  </script>

</body>

</html>

  @media print, screen and (max-width: 63.99875em) {
    .media-object.stack-for-medium {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    } 
}

我已在 https://codepen.io/DanielRuf/pen/LYGRBpq?editors=1100 完成此操作并添加了一些空格和软连字符以实现更好的自动文本中断。

可堆叠媒体对象在 Foundation 中的行为不正确

Stackable media objects not behaving correctly in Foundation

html

css

zurb-foundation

zurb-foundation-6