Html 引导响应嵌入未按预期工作
在Bootstrap3.1的网格系统中嵌入视频,视频不会扩展网格列的全宽。如何使其与保持纵横比的父列保持100%的宽度? 此外,即使我使用4:3的视频,它在浏览器中显示的宽度也非常大,高度也非常短。 这是我的密码:Html 引导响应嵌入未按预期工作,html,responsive-design,twitter-bootstrap-3,youtube-iframe-api,Html,Responsive Design,Twitter Bootstrap 3,Youtube Iframe Api,在Bootstrap3.1的网格系统中嵌入视频,视频不会扩展网格列的全宽。如何使其与保持纵横比的父列保持100%的宽度? 此外,即使我使用4:3的视频,它在浏览器中显示的宽度也非常大,高度也非常短。 这是我的密码: <div class="row"> <div class="col-md-8"> . <!-- other items--> . </div> <div class="col-md-4">
<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>
.
.
作为:
很确定直到3.2才添加嵌入式响应。尝试更新
如果由于某种原因无法更新,您可以自己添加样式。这相当直截了当。下面是一些俏皮话:
// 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%;
}
可以肯定的是,直到3.2版本才添加了
embed-responsive
。尝试更新。-是的,@Rob是对的。大约在几周前,3.2秒的时间里,Rob和BootstrapThemer才添加了响应性嵌入。。。。它起作用了:)请不要使用“bootstrap”标签,使用“twitter bootstrap”,因为它意味着其他东西