How to place a dropdown at the top most right sect

问题:

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:

1st Code:

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

2nd Code:

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

回答1:

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>

回答2:

do you wont this type of output? yes then add see .demo class

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

回答3:

you can add new parent div for both of your code.

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

回答4:

You can add a wrapper as to wrap these two element (video & the dropdown menu).

Then you can use position: absolute to position the dropdown menu to the top right corner. The video-wrapper needed to be set with position: relative as for the dropdown menu to based on.

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