提问人：Márton Stark 提问时间：8/10/2022 更新时间：8/10/2022 访问量：1070
Bootstrap-5 视频嵌入响应式
Bootstrap-5 video embed responsive
问：
我正在努力使用 Bootstrap 响应式视频嵌入。
不知何故，父容器没有响应，只有内容是响应的。
知道我做错了什么吗？<iframe>
.embed-responsive-item {
height: 100%;
width: 100%;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6">
<h1>TITLE</h1>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, nemo? Recusandae doloribus cupiditate repellendus saepe exercitationem soluta possimus inventore atque! Nesciunt totam, consectetur doloremque corrupti quos dolorem explicabo debitis. Dicta
similique quisquam officia esse! Magni vitae, assumenda porro natus aliquid omnis sequi facere modi accusamus veniam. Impedit repellat modi reiciendis sapiente dicta! Impedit aperiam repellat veniam, quos ex praesentium. Necessitatibus, est sequi
fugiat, nostrum deserunt architecto optio harum, ipsa odit atque expedita! Cumque, doloribus. Quidem a laudantium ipsum fugit amet. Natus, iusto! Nesciunt voluptate enim laboriosam suscipit molestias qui dicta, illo, possimus totam nihil, doloribus
ullam ad est quasi architecto!
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
</div>感谢您的帮助！ 问候
答：
0赞
Amol
8/10/2022
#1
在检查响应之前，您需要将 .row div 包装到 .container div 示例：https://codesandbox.io/s/zealous-colden-7bxpn5?file=/index.html
评论
0赞
Márton Stark
8/13/2022
你好！谢谢你的下水道。我想做的类似这个示例视频：getbootstrap.com/docs/4.0/utilities/embed .在我的例子中，不能像这样保持纵横比。任何想法如何解决
0赞
Amol
8/29/2022
共享您当前的 html 代码。
0赞
user6282287
8/10/2022
#2
您必须先知道 Bootstrap 本质上是响应式的，只需使用正确的方式即可。
在此代码中，您错过了行标记之前的容器类
<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>TITLE</h1>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, nemo? Recusandae doloribus cupiditate repellendus saepe exercitationem soluta possimus inventore atque! Nesciunt totam, consectetur doloremque corrupti quos dolorem explicabo debitis. Dicta
similique quisquam officia esse! Magni vitae, assumenda porro natus aliquid omnis sequi facere modi accusamus veniam. Impedit repellat modi reiciendis sapiente dicta! Impedit aperiam repellat veniam, quos ex praesentium. Necessitatibus, est sequi
fugiat, nostrum deserunt architecto optio harum, ipsa odit atque expedita! Cumque, doloribus. Quidem a laudantium ipsum fugit amet. Natus, iusto! Nesciunt voluptate enim laboriosam suscipit molestias qui dicta, illo, possimus totam nihil, doloribus
ullam ad est quasi architecto!
</div> <!-- end of col md 6 -->
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div> <!-- end of col md 6 -->
</div> <!-- end ofrow -->
</div> <!-- end of container -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
评论
1赞
Márton Stark
8/12/2022
你好！谢谢你的下水道。我想要的是类似于这个例子：getbootstrap.com/docs/4.0/utilities/embed 。我不能像这样保持纵横比。谢谢！
0赞
Alexxus
7/3/2023
@MártonStark，为什么要使用旧的 bootstrap （v4） 文档？
评论