Bootstrap 响应式嵌入未按预期工作答案

【问题标题】：Bootstrap responsive embed not working as expectedBootstrap 响应式嵌入未按预期工作
【发布时间】：2014-08-05 15:29:31
【问题描述】：

在 Bootstrap 3.1 的网格系统中嵌入视频，视频没有扩展网格列的整个宽度。如何使其 100% 宽到保持纵横比的父列？此外，即使我使用 4:3 视频，它在浏览器中也显得很宽，而且高度很短。这是我的代码：

<div class="row">
   <div class="col-md-8">
   .
   <!-- other items-->
   .
   </div>

   <div class="col-md-4">
            <div class="embed-responsive embed-responsive-4by3">
                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/gYhi3pAiQY4"></iframe>
            </div>
   </div>
</div>

【问题讨论】：

很确定 embed-responsive 直到 3.2 才添加。尝试更新。
jsbin.com/yolalu/1/edit -- 是的，@Rob 是正确的。直到几周前，3.2 才添加了响应式嵌入
非常感谢 Rob 和 BootstrapThemer.... 成功了 :)
请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的东西

标签： html responsive-design twitter-bootstrap-3 youtube-iframe-api

【解决方案1】：

作为Rob said in a comment:

很确定 embed-responsive 直到 3.2 才添加。尝试更新。

【讨论】：

【解决方案2】：

如果由于某种原因无法更新，您可以自己添加样式。这是相当直接的。这是 SASS：

// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }
}

// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

【讨论】：