Как разместить выпадающий список в самом верхнем правом разделе видео в Bootstrap 4?

Question

У меня есть скриншот, показанный ниже, который я должен скопировать в Bootstrap 4.

Приведенный выше снимок экрана представляет собой видео с раскрывающимся списком в крайнем правом верхнем углу .

Код, который я использовал для размещения видео:

1-й код:

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

Мне интересно, какие изменения я должен внести в приведенный выше код, чтобы я мог разместить раскрывающийся список в самом верхнем правом углу.

Код, который я бы использовал для размещения выпадающего списка в крайнем правом углу:

2-й код:

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

Постановка задачи:

Мне интересно, какие изменения я должен внести в 1-й код , чтобы я мог поместить в него 2-й код.

Answer 1

Чтобы достичь того, что вы хотите, вы можете использовать этот макет:
Не стесняйтесь настраивать поля / отступы в соответствии с вашими потребностями.
Вам также необходимо создать выпадающую кнопку, как показано на скриншоте.

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

Answer 2

вы можете добавить новый родительский div для обоих ваших кодов.

.page-head {
  position: relative; 
  display : block;
}

.page-head .dropdown {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

<div class="page-head">
  <!-- put your 2nd code here -->
  <!-- put your 1st code here -->
</div>

Answer 3

Вы можете добавить обертку, чтобы обернуть эти два элемента (видео и выпадающее меню).

Затем вы можете использовать position: absolute, чтобы поместить выпадающее меню в верхний правый угол. video-wrapper необходимо установить с помощью position: relative, как в раскрывающемся меню на основе.

.video-wrapper {
  position: relative;
  width: auto;
  float: left;
}

.dropdown {
  position: absolute;
  right: 0px;
  top: 0px;
}

<header class="container border masthead_video text-white text-center">
  <div class="video-wrapper">
    <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>
    <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>
</header>

Answer 4

у вас нет такого типа вывода? да, затем добавить см. .demo класс

.demo{
      top: 0 !important;
  
    position: fixed !important;
   
    right: 0 !important;
   
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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