下拉菜单项总是与其父项具有相同的大小？ （Bootstrap＆amp; CSS）

Question

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

这是一张图片：

所以我现在想要＆＃34; One＆＃34; ＆安培; ＆＃34;两个＆＃34;与＃34完全相同;这是一个下拉列表＆＃34; （至少在宽度方面）。现在他们有点太大了。当我调整窗口大小时，父元素（＆＃34;这是一个下拉列表＆＃34;）会改变大小，并且＆＃34; One＆＃34; ＆安培; ＆＃34;两个＆＃34;然后应该相应地调整大小。

代码

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

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

我宁愿在这里包括一点点，只是为了确定。

Answer 1

您应该从padding元素中删除.dropdown-content a：

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

Answer 2

尝试在width: 100%;和.dropbtn中添加.dropdown:hover .dropdown-content。这应该将所有元素设置为父宽度。