如何解决下拉菜单的定位问题答案

【问题标题】：how to solve positioning problem of dropdown menu如何解决下拉菜单的定位问题
【发布时间】：2020-01-31 04:01:52
【问题描述】：

这是我现在的 html 和 css 代码

<div class="header">
<div class="container-fluid">
  <div class="row">
    <div class="col-1"></div>
    <div class="col-10"></div>
    <div class="col-1 dropdown">
      <button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Menu
        <i class="fa fa-bars"></i>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">About </a>
        <a class="dropdown-item" href="#">Education</a>
        <a class="dropdown-item" href="#">Hobbies</a>
        <a class="dropdown-item" href="#">Contact</a>
      </div>
    </div>
  </div>
</div>

.header{
position: relative;
top: 20px;
}

.dropdown-menu {
min-width: 120px !important;
height: 145px !important;
position: relative;
right: 0;
}

body {
background-color: lightblue;
}

我想让下拉菜单向右移动而不是向左移动what i want to achieve 但我的代码得到的是what i got

【问题讨论】：

标签： html css bootstrap-4 dropdown

【解决方案1】：

如果您使用引导程序，则不需要任何自定义 css。

默认情况下，下拉菜单会自动 100% 定位在其父级的顶部和左侧。将 .dropdown-menu-right 添加到 .dropdown-menu 以右对齐下拉菜单。

参考：https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

演示：https://jsfiddle.net/7aso841L/

<div class="header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-1"></div>
      <div class="col-10"></div>
      <div class="col-1 dropdown">
        <button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">About </a>
          <a class="dropdown-item" href="#">Education</a>
          <a class="dropdown-item" href="#">Hobbies</a>
          <a class="dropdown-item" href="#">Contact</a>
        </div>
      </div>
    </div>
  </div>

【讨论】：