嵌入视频隐藏在 bootstrap 移动视图中

Question

我正在使用最新版本的 bootstrap 和 bootswatch united theme 来创建和学习一个正常的网站。该网站目前在 link live site 上运行，您可以看到右侧有一个嵌入。我正在使用 asp.net mvc 作为视图引擎，仅此而已。

视频页面的代码在 js 上fiddle http://jsfiddle.net/v3bjzoej/ 因为 SO 由于 XSS 问题不允许它。

<section class="col-lg-6 pull-right">
<div class="embed-responsive embed-responsive-16by9">
    <iframe src="//player.vimeo.com/video/116351996" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" allowfullscreen></iframe>
</div>
</section>

索引页上也发生了同样的情况 http://jsfiddle.net/pw1zyypf/

我在 fiddle 上发布完整代码时遇到问题，可能是因为其中有太多 mvc 对象。我知道它与 css 问题有关，但非常感谢真正的帮助。

Answer 1

将此 col-md-6 col-xs-12 col-sm-6 添加到有视频 iframe 的 section

<section class="col-lg-6 col-md-6 col-xs-12 col-sm-6 pull-right">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe src=""></iframe>
  </div>
</section>

col-sm-6 - 适用于小型设备平板电脑 (≥768px)（一半）
col-md-6 - 适用于中型设备台式机 (≥992px)（一半）
col-xs-12 - 超小型设备手机 (<768px)（完整）

嵌入视频隐藏在 bootstrap 移动视图中

embed video is hiding in bootstrap mobile view

html

css

asp.net-mvc-4

twitter-bootstrap-3

bootswatch