twitter-bootstrap - 使用 Bootstrap 自动调整iframe(YouTube视频)的大小

Question

我希望建立一个像https://www.emimacleod.com/totem.html这样的网站。但是，我编写的代码不适用于iframe。

<div class="container">
			<div class="row justify-content-between" id="basic-program-info-container">
				<div class="col col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<div class="title">
						<h1>ProjectName</h1>
					</div>
					<div class="program-info-container">
						<h2 class="title">Institute</h2>
						<h3 class="content">XXX University</h3>
					</div>
					<div class="program-info-container">
						<h2 class="title">Time</h2>
						<h3 class="content">2016 XXX - 2016 XXX</h3>
					</div>
					<div class="program-info-container">
						<h2 class="title">Team member</h2>
						<h3 class="content">Name1</h3>
						<h3 class="content">Name1</h3>
						<h3 class="content">Name1</h3>
					</div>
				</div>

				<div class="col col-lg-7 col-md-7 col-sm-12 col-xs-12">
						<h2 class="intro-content">Introduction</h2>
						<h2 class="intro-content">Introduction</h2>
						<iframe src="https://www.youtube.com/embed/blahblahblah" frameborder="0" allowfullscreen></iframe>
				</div>
			</div>
     </div>

我希望YouTube视频的整个iframe都在行内。另外，在更换屏幕时(自适应设计)，高宽比应相同。

Answer 1

参见Bootstrap的embed examples，如下所示(如果您使用的是Bootstrap 4):

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8"></iframe>
</div>

bootstrap 3 here。

另外，您使用的引导栏错误。当您执行 col col-lg-4 col-md-4 col-sm-12 col-xs-12时，无需将其指定为所有版本，只需将其更改的次要版本和较低版本都指定为 col col-md-4(默认情况下，所有列在移动设备上均为 col-xs-12，在使用 col-md-4之后，它将也将它用于 lg)。