Question

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

＆＃13;

<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>

＆＃13;

我希望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。

另外，你使用bootstrap列是错误的。执行col col-lg-4 col-md-4 col-sm-12 col-xs-12时，您不必将其指定给所有版本，只需将次版本及其更改的较低版本指定为col col-md-4（默认情况下，所有列均为col-xs-12在移动设备上使用col-md-4之后，它也会将其用于lg。

Answer 2

在iframe的样式中使用position: absolute;和width: 100%，可以使其使用bootstrap元素的整个宽度。根据您的喜好设置height样式属性。

<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 style="width: 100%; position: absolute;"></iframe>
				</div>
			</div>
     </div>
     
     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用引导程序

2 个答案: