如何在Bootstrap 4的视频的最右上部分放置一个下拉菜单?

问题描述

我有一个截图，如下所示，我必须在Bootstrap 4中进行复制.

I have a screenshot as shown below which I have to replicate in Bootstrap 4.

上面的屏幕截图基本上是视频，其中下拉菜单位于最右端.

The above screenshot is basically a video with the dropdown at the top most extreme right.

我用来放置视频的代码是:

The code which I have used in order to place a video is:

第一个代码:

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

我想知道我应该对上面的代码进行哪些更改，以便可以在最右上角放置一个下拉菜单.

I am wondering what changes I should make in the above code so that I can place a dropdown at the top most extreme right.

我将用于在最右边放置下拉菜单的代码是:

The code which I would be using in order to place a dropdown at the extreme right is:

第二个代码:

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

问题陈述:

Problem Statement:

我想知道我应该对第一代码进行哪些更改，以便能够在其中放置第二代码.

I am wondering what changes I should make in the 1st code so that I am able to place 2nd code in it.

推荐答案

要实现所需的功能，可以使用以下布局:
随时根据需要调整边距/填充.
您还需要根据屏幕截图设计下拉按钮.

To achieve what you want, you may use this layout:
Feel free to tweak margin/padding as per your need.
You'll also need to design the dropdown button as per your screenshot.

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

这篇关于如何在Bootstrap 4的视频的最右上部分放置一个下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！