Javascript 是否使下拉菜单项始终与其父项具有相同的大小？（引导和CSS）

我有一个带有下拉菜单的导航栏（悬停）。我希望下拉菜单项的大小与父菜单项的大小相同

这是一张照片：

因此，我现在希望“一”和“二”的大小与“这是一个下拉列表”（至少在宽度方面）完全相同。现在它们有点太大了。当我调整窗口大小时，父元素（“这是一个下拉列表”）会改变大小，“一”和“二”应该相应地调整大小，就像它原来那样

代码

我有一个包含不同元素的导航栏，其基本结构如下：

<div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
  <div class="row">

    <div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
      <div class="row">

        <div class="dropdown col-xs-12 col-sm-2">
          <div class="container-fluid">
            <div class="row">
              <button class="dropbtn col-xs-12">This is a dropdown</button>
              <div class="dropdown-content col-xs-12 nopadding">
                <a href="#">One</a>
                <a href="#">Two</a>
              </div>
            </div>
          </div>
        </div>
...more navbar elements follow here

    </div>
   </div>

  </div>
</div>

这是一个下拉列表
…更多导航栏元素如下

以下是一些CSS：

/* Dropdown Button */
.dropbtn {
    background-color: #F6F8FB;
    border: none;
    cursor: pointer;
    font-family: AlegreyaSansSC-Light;
    font-size: 16px;
    color: #637F92;
    letter-spacing: 0.52px;
    height: 81px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F8FB;

  z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 30px;
  text-align: center;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    top: 81px;
    position: absolute;
}

/*下拉按钮*/
.dropbtn{
背景色：#F6F8FB；
边界：无；
光标：指针；
字体系列：AlegreyaSansSC Light；
字体大小：16px；
颜色：#637F92；
字母间距：0.52px；
高度：81px；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#F6F8FB；
z指数：1；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景：rgb（221232 241）；/*不支持RGBA的旧浏览器的回退*/
背景：rgba（221232 241,0.95）；
}
/*下拉列表中的链接*/
.下拉内容a{
填充：30px；
文本对齐：居中；
文字装饰：无；
显示：块；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
顶部：81px；
位置：绝对位置；
}

---

为了确保这一点，我在这里包含了太多内容。

您应该从

下拉列表中删除
填充内容。
元素：

.dropdown-content a {
  /*padding: 30px;*/
  text-align: center;
  text-decoration: none;
  display: block;
}

尝试添加
宽度：100%在您的
.dropbtn
和
中。下拉：悬停。下拉内容
。这应该将所有元素设置为父宽度。
当您使下拉内容的父位置相对时，可以使其具有100%的宽度。然后确保a元素的宽度不超过这个，所以删除它的填充谢谢。这里的父元素究竟是什么？我会假设dropbtn
，或者它只能是直系父母？（在本例中是引导类
行
？），但我的下拉菜单项中没有填充（所有内容都收缩在一起）。信息技术它还比它的父样式更大（更宽）。你的css中可能有一些其他样式的填充/边距。使用开发人员工具栏检查您为什么获得它，并删除必要的内容。