Zurb 基础均衡器不工作答案

【问题标题】：Zurb Foundation Equalizer not workingZurb 基础均衡器不工作
【发布时间】：2018-07-06 23:47:03
【问题描述】：

我正在尝试在“显示”视图中显示一个表单，并希望使用 Foundation 的均衡器使 div 具有相同的高度，但由于某种原因，它不适用于一个 div 比另一个高。

我的猜测是它与在容器中使用 php 有关，但我在他们的文档页面上没有找到与此相关的任何内容。

如果有人能指出我哪里出错了，或者如果他们确定这对 Foundation 不起作用，我将不胜感激您的意见！谢谢！

HTML：

<div class="row" data-equalizer>
    <div class="small-6 columns" data-equalizer-watch>          
       <fieldset><legend>Order Information</legend>
          <?php
            echo "Number of Guests: ". $order_array['guestNumber' . $x].'<br>';
            echo "Food: ". $order_array['food' . $x].'<br>';
         ?>     
       </fieldset>  
    </div>
<div class="small-6 columns k" data-equalizer-watch>
    <fieldset><legend>Location</legend>
    <?php
         echo "Order Name: " .  $order_array['orderName'] . '<br>';
     ?>
    </fieldset> 
</div>

</div>

【问题讨论】：

您是包含所有基础文件还是仅包含特定文件。您是否尝试了本节中的所有内容：使用 Javascript - 在基础文档上？您可能只是缺少一个 JS 文件。看起来你的 div 没有正确关闭，等等......
我正在使用所有的粉底。我的基金会在其他任何地方都运行良好，但我会仔细检查以确保所有文件都在那里，这很好。是的，我忘记包含最后一个 div，但将它放在我的真实文件中。
双重检查，所有文件都在那里。

标签： html css zurb-foundation

【解决方案1】：

我的解决方案（在使用我推荐的另一个插件找到更有效的解决方案之前）是像这样包装基础初始化：

$(window).on('load', function () {
  $(document).foundation();
});

【讨论】：

【解决方案2】：

如果项目正在堆叠（如果所有项目的offset().top 值不相等）并且您已设置equalize_on_stack: false，则均衡器将无效。尝试将此配置添加到您的主 js 文件中：

$(document).ready(function() {
  $(document).foundation({
    equalizer : {
      // Specify if Equalizer should make elements equal height once they become stacked.
      equalize_on_stack: true
    }
  });
});

【讨论】：

【解决方案3】：

我的问题是我在页面完成加载之前初始化了 Foundation js。确保将 Foundation 初始化程序包装在 jQuery ready() 函数中：

$(function() {
  $(document).foundation();
});

【讨论】：

或者只是在正文下方包含您的 javascript 文件。这样 dom 在你调用你的 js 文件之前被加载，这意味着 dom 在你加载基础之前被加载。

【解决方案4】：

我的第一个想法是均衡器正在工作，它使两个<div class="small-6 columns">s 的高度相同。除非您有一些视觉线索来区分它们，例如不同的背景颜色或边框设置，否则可能很难判断均衡器是否正常工作。请注意，我以前犯过这个错误。

如果您的意图是使<fieldset>s 具有相同的高度，则需要将data-equalizer-watch 从<div class="small-6 columns">s 移动到<fieldset>s。由于<fieldset> 的边框，这还可以让您直观地查看均衡器是否工作。

我用两个示例创建了这个代码笔http://cdpn.io/igDoI。一个是你上面的代码，我在你的<div class="small-6 columns">s 中添加了一个虚线边框。另一个示例是上面的代码，我将data-equalizer-watch 移动到<fieldset>s。

希望对你有帮助

【讨论】：

【解决方案5】：

不确定这是否适用于您，但是当您使用 Foundation 的均衡器时，您必须确保每个具有“data-equalizer-width”也是元素子元素的祖先元素的以下内容带有“数据均衡器”属性：

无国界
无填充
没有边距

这实际上不在 API 中，但这些属性会影响均衡器的高度计算，有时会导致它出错。

此外，您必须确保在调用均衡代码时，正在“均衡”的控件可见。因此，如果您在页面加载时隐藏的选项卡中使用均衡器，则需要在该部分变为可见时再次触发均衡器。您可以通过在窗口对象上触发调整大小事件来做到这一点。

【讨论】：

【解决方案6】：

页面加载完成后初始化 Foundation，对我有用。我通过在加载后仅初始化均衡器来改进该解决方案。所以其他的东西可以从“准备好”开始。

jQuery(window).on('load', function () {
   var element = jQuery('[data-equalizer]');
   var elem = new Foundation.Equalizer(element);
});

【讨论】：