代码之家 › 专栏 › 技术社区 › flash

如何在引导4中视频的最右上方放置下拉列表?

dropdown bootstrap-4 video css html

flash · 技术社区 · 7 年前

我有一个如下所示的屏幕截图,我必须在引导4中复制它。

上面的屏幕截图基本上是一个视频,在最右上方有 下拉菜单。

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

1st code:

<header class=“container border mashead_video text white text center”> <DIV class=“嵌入响应的嵌入-响应的-16by9”> <iframe class=“embed responsible 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> 我想知道我应该在上面的代码中做些什么更改,以便在最右上方放置下拉列表。为了在最右边放置下拉列表,我将使用的代码是: 2nd code: <div class=“DropDown”> <button type=“button”class=“btn btn primary dropdown toggle”data toggle=“dropdown”> 下拉按钮 </button> <DIV class=“下拉菜单”> <A class=“DropDown item”href=“”>链接1</A> <A class=“DropDown item”href=“”>链接2</A> <A class=“DropDown item”href=“”>链接3</A> </DIV> </DIV> 问题陈述: 我想知道我应该在第一个代码中做什么更改,这样我就可以在其中放置第二个代码了。上面的截图基本上是视频与最右上方的下拉列表. 我用来放置视频的代码是: 第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> 我想知道我应该在上面的代码中做些什么更改,以便在最右上方放置下拉列表。在最右边放置下拉列表时使用的代码是: 第二代码: <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> 问题陈述: 我想知道有什么变化我应该输入第一个密码这样我就可以在其中放置第二个代码。

4 回复 | 直到 7 年前

Tushar Shukla 7 年前

要实现您想要的,您可以使用此布局:
您可以根据需要调整页边/填充。
您还需要根据屏幕截图设计下拉按钮。

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

-1

Hardik Prajapati 7 年前

你不喜欢这种类型的输出吗?是,然后添加see.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>

-1

ndunk28 7 年前

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

-1

Toan Lu 7 年前

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

然后你可以用 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>