Question

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

Office Open XML Ecma TC45 Final Draft Part 4: Markup Language Reference

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

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

第一个代码：

json_decode($_POST['arrGFormId'])

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

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

第二个代码：

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

问题陈述：

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

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

您不会输出此类输出吗？是的，然后添加参见.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>

Answer 3

您可以为两个代码添加新的父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 4

您可以添加包装器来包装这两个元素（视频和下拉菜单）。

然后，您可以使用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>

如何在Bootstrap 4的视频的最右上方放置一个下拉菜单？

4 个答案: