Bootstrap 3.0 打破 JWPlayer答案

【问题标题】：Bootstrap 3.0 breaking JWPlayerBootstrap 3.0 打破 JWPlayer
【发布时间】：2014-05-22 00:15:46
【问题描述】：

我有两个小提琴，它们都是完全相同的代码，但有一个例外：在第二个中，我包含了 bootstrap 3.0 (bootstrap.min.css)，代码没有任何变化。两者都是这样的：

HTML：

<div id="mediaplayer250"></div>

JavaScript：

jwplayer("mediaplayer250").setup({
   file: "http://clips.vorwaerts-gmbh.de/VfE_flash.mp4",
   autostart: true,
   tracks:[{
      file: "//thumbs.thehun.net/video/2014-04/250533d24fe409be_proverb.vtt",
      kind: "thumbnails"
   }]
});

请注意，播放视频并将鼠标移到进度条上会显示缩略图预览整齐地位于保留区域内

在第二个版本中，缩略图看起来比它应该适合的区域大。我该如何解决这个问题？这是 Bootstrap 3.0 还是 JWplayer 中的问题？

the first jsfiddle, showing the correct tooltips

the second link, this one shows an sizing problem in the tooltips

【问题讨论】：

你得到答案了吗？
JWPlayer 为我提供的答案：不要使用 Bootstrap 3...非常令人失望...
我有点晚了，但显然有一个比不使用引导程序更好的解决方案，我猜回答你的人对他们自己的产品有一点了解——至少关于它的 CSS ：p检查我的答案，看看它是否对你有帮助。

标签： css twitter-bootstrap twitter-bootstrap-3 jwplayer6

【解决方案1】：

这里的问题是以下引导规则：

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

现在要解决 jwlayer 的问题，而不更改所有引导程序/站点元素的此规则（这可能导致不需要的行为），将此 CSS 规则添加到您的自定义 CSS：

.jwplayer *, .jwplayer *:before, .jwplayer *:after {
  -webkit-box-sizing: content-box!important;
  -moz-box-sizing: content-box!important;
  box-sizing: content-box!important;
}

查看您更新的小提琴：http://jsfiddle.net/P9eJK/5/
抱歉，回复晚了...

【讨论】：