html - 如何在 Bootstrap 4 中视频的最右上方放置下拉菜单?
问题描述
我有一个如下所示的屏幕截图,我必须在 Bootstrap 4 中复制它。
上面的截图基本上是一个视频,最右边的下拉菜单。
我用来放置视频的代码是:
第一个代码:
<header class="container border masthead_video text-white text-center">
<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 class="row mt-5">
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
</div>
</div>
</header>
我想知道我应该在上面的代码中进行哪些更改,以便我可以在最右上角放置一个下拉列表。
为了在最右边放置一个下拉菜单,我将使用的代码是:
第二个代码:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
问题陈述:
我想知道我应该在第一个代码中进行哪些更改,以便能够在其中放置第二个代码。
解决方案
为了达到你想要的效果,你可以使用这个布局:
根据你的需要随意调整边距/填充。
您还需要根据屏幕截图设计下拉按钮。
.header-dropdown {
position: absolute;
display: flex;
z-index: 1;
padding: 0px;
justify-content: flex-end;
padding-right: 45px;
}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<header class="container border masthead_video text-white text-center">
<div class="header-dropdown container mt-5">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<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>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
推荐阅读
- reactjs - React -Native“经度值不能从字符串转换为双精度”
- html - 是否可以使用 1 个 html 文件来查看不同页面上的不同项目?
- javascript - 使用 codeigniter 将值 null 保存到数据库
- angular - 如何在if语句中测试函数jasmin karma angular
- javascript - Firefox 中的日期对象总是返回毫秒数,四舍五入到数百
- java - 编码字符串是否有最大 base64 大小?
- javascript - 如何为客户端加载 ejs 模板?
- laravel - laravel-mix在vue组件中看不到连通图
- spring-cloud-dataflow - 是否会有 spring-cloud-starter-dataflow-server-local 的 2.0.0.RELEASE 或者是否有创建本地服务器的新方法?
- yocto - 如何将可执行文件放入 yocto 构建下的指定目录(路径)