Foundation 均衡器插头 + BS 3.2?

2023-12-09

尝试使用均衡器插件,但 id 不起作用,并且没有错误。它看起来像http://goo.gl/OvKy1g。这是一个页面http://goo.gl/INMqUL。我需要为其添加一些 css 吗?


您可以将 Foundation Equalize 插件与 Twitter Bootstrap 一起使用,但您需要做一些事情才能使其正常工作。

DEMO

首先,您的主要问题是foundation.js正在寻找相应的foundation.css。由于您使用 Twitter Bootstrap 作为基本样式,因此您可能不想处理所有潜在的样式冲突或让您的用户下载另一个大型 css 文件。实际上,所需要的只是对 Foundation 版本和命名空间的引用,因此只需将以下内容添加到您的 css 中:

meta.foundation-version {
  font-family: "/5.4.5/"; 
}
meta.foundation-data-attribute-namespace {
  font-family: false; 
}

第二个问题是你的标记。你有data-equalizer-watch属性应用于包含.col-sm-4元素,但是您的边框位于带有该类的子元素上latest-news-item。因此,将您的标记更改为:

<div class="row" data-equalizer>
    <div class="col-sm-4" >
      <div class="latest-news-item" data-equalizer-watch>
        <!--Your content here-->
      </div>
    </div>
    <div class="col-sm-4" >
      <div class="latest-news-item" data-equalizer-watch>
        <!--Your content here-->
      </div>
    </div>
    <div class="col-sm-4" >
      <div class="latest-news-item" data-equalizer-watch>
        <!--Your content here-->
      </div>
    </div>
</div>

正如您在演示中所看到的,我能够让您的测试页适应这些更改,但我还能够通过使用基础下载上的自定义选项页面并仅使用 equalize 插件构建一个 js 版本。缩小版是31K。如果您不打算使用任何其他基础插件,您可以考虑使用自定义文件。

也就是说,对于那些正在寻找替代的轻量级方法的人来说,编写自己的 jQuery 可能同样容易,例如通过向要均衡的行添加一个类(我称之为“均衡”),然后添加:

var row=$('.equalize');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

将其包装在一个函数中,如果这对您很重要,您也可以在调整大小时调用它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Foundation 均衡器插头 + BS 3.2? 的相关文章

随机推荐

  • 使用 css 将水平子菜单置于父级下方居中

    最好用小提琴来展示 http jsfiddle net Jnttm 如何使子菜单位于父菜单项下方的中心 我发现的许多居中技巧并不适用 因为子元素比父元素更宽 这可以用纯 CSS 实现吗 还是我必须求助于 javascript 如果需要 JS
  • 为什么同步字段变量并在同步块内递增它会导致打印乱序?

    我有一个简单的代码片段 public class ItemManager private Integer itemCount 0 public void incrementAndPrint synchronized this System
  • 从 Firefox WebDriver 源代码中删除机器人识别功能?

    方法之一WebDriver 将自己标识为外部网站的机器人是通过设置webdriver 活动标志为真 SO 上的用户建议可以修改Chrome Driver用于删除所有机器人识别属性的源代码 请参阅this and this回复 是否可以通过修
  • 在android中将word文档转换为pdf

    我知道 stackoverflow 中有 n 个关于同一问题的问题 但我没有得到我想要的东西 我什至尝试使用jwordconvert jar from Qoppa软件 但是唉 它说 Unable to execute dex Java he
  • 屏幕锁定时服务暂停

    出于测试目的 我制作了一项会发出蜂鸣声的服务 每 1 分钟一次 还没有客户端 服务器接口 正常时会发出蜂鸣声 屏幕打开 但当它进入睡眠状态时 蜂鸣声停止 我正在制作一个必须定期轮询服务器的应用程序 为了某件事 为此 我正在尝试创建一项持续不
  • 正则表达式帮助,贪婪与非贪婪

    嘿 我有一个很大的 html 字符串 比如 a style background none href swatch4 a a style background none a
  • 如何在不更改视图模型的属性 getter 的情况下格式化 XAML 中的字符串?

    我的应用程序中有以下界面 public interface IContactMedium string ContactString get set string Type get set bool IsValid 该接口适用于代表某人某种联
  • 将目录添加到 $LOAD_PATH (Ruby)

    我见过两种常用的技术 用于将当前正在执行的文件的目录添加到 LOAD PATH 或 我看到了这样做的好处 以防您不使用 gem 显然 其中一个似乎比另一个更冗长 但是有理由选择其中一个而不是另一个吗 第一种冗长的方法 可能有点矫枉过正 LO
  • WEKA & MySQL 设置连接

    WEKA Explorer 无法打开与 MySQL 的连接 连接到 jdbc mysql MYSERVER 3306 NAME true 顺便说一句 mysql驱动程序已下载 mysql connector java 5 1 14 bin
  • 为什么使用 python split 时字符串会发生变化?

    test str Question The cryptocurrency Bitcoin Cash BCH USD settled at 1368 USD at 07 00 AM UTC at the Bitfinex exchange o
  • 简单java程序中的意外结果

    我是java新手 我的问题是按下一个键后输出显示2个数字 我不明白为什么 这是代码 class ForTest public static void main String args throws java io IOException i
  • 使用 zend-decorator 格式化表列中的 Zend_Form_Element_Radio 和行中的其他 Zend Form 元素

    我想用装饰者将以下 Zend Form 格式化为表格 将描述放在第一列中and第二列中的 Zend Form Element Radio 选项and add 2 select正如您在后面的 html 示例中看到的那样 在每一行中 我需要一个
  • 如何在C++中将文件编码格式设置为UTF8

    我的软件的要求是包含导出数据的文件的编码应为 UTF8 但是当我将数据写入文件时 编码始终是 ANSI 我使用 Notepad 来检查这一点 我目前正在做的是尝试通过读取文件来手动转换文件 将其转换为 UTF8 并将文本写入新文件 line
  • Java ServletContext

    我有一个 JSP 网站 而不是 Spring MVC 它有一个配置文件 web xml 我想要获取 web xml 文件中的一些设置 但是 我想从 源包 文件夹中的类中访问这些设置 我知道我可以将 ServletContext 从 JSP
  • 验证空手道框架中的浮点值范围

    我的场景是检查字段是否接受 0 01 到 25000 的范围 它可以是十进制值 在空手道框架中执行此操作的方法是什么 我使用了下面的正则表达式 这是不正确的 正则表达式 0 9 只需乘以 1 即可将字符串转换为数字 def foo 0 2
  • 在 R 中工作时分离所有包

    在努力解决另一个问题时 我遇到了这个问题 我可以通过以下方式删除所有 R 对象 rm list ls all TRUE 是否有等效的命令可以在工作会话期间分离已安装的软件包 gt sessionInfo R version 2 12 2 2
  • 无法添加 DLL 引用到 VS 2008

    我想知道是否有人可以帮助我 我正在尝试在 VB Net 3 5 应用程序中添加对 LAME MP3 编码器的引用 我使用的 DLL lame enc dll v3 98 2 是从这里下载的 http rarewares org mp3 la
  • 如何对后续行进行分组(基于标准)然后对它们进行计数 [MySQL]?

    假设我有这样一个表 按日期排序 id name type date 1 A 1 01 08 2012 2 A 2 01 08 2012 3 B 1 02 09 2012 4 A 1 01 10 2012 5 A 4 01 10 2012 6
  • 卸载并再次安装应用程序时,Firebase 身份验证返回特定用户

    我有一个问题 我在我的应用程序中使用 google 登录 Firebase 假设有3个用户X Y and Z我曾与谁一起登录我的应用程序 我用于检查用户是否登录的代码 FirebaseAuth mAuth FirebaseAuth getI
  • Foundation 均衡器插头 + BS 3.2?

    尝试使用均衡器插件 但 id 不起作用 并且没有错误 它看起来像http goo gl OvKy1g 这是一个页面http goo gl INMqUL 我需要为其添加一些 css 吗 您可以将 Foundation Equalize 插件与