使下拉菜单项的大小始终与其父项大小相同？（Bootstrap＆CSS）

我有一个带有下拉菜单（悬停）的导航栏。我希望下拉菜单项具有与父级相同的大小。使下拉菜单项的大小始终与其父项大小相同？（Bootstrap＆CSS）

这里有一个画面：

所以我现在想“一” &“二”有确切的相同尺寸的“这是一个下拉列表”（至少在宽度方面）。现在他们有点太大了。当我调整窗口大小时，父元素（“这是一个下拉列表”）更改大小，并且“One”应该相应地重新调整大小，因为它是。

代码

我有不同的元素，其基本结构这样的导航栏：

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

我已经相当包括一个这里有点太多，只是为了确定。

来源

2017-02-14 George Welder

您可以使下拉内容的宽度为100％，当您将其设为父级相对位置时。然后确保一个元素不超过这个，所以删除它的填充 – Mart

谢谢。父元素究竟会在这里？我会假设'dropbtn'，或者它只能是直接的父母吗？（在这种情况下，然后引导类'行'？） –

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

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

来源

2017-02-14 16:14:50 Dekel

但我有，没有填充在我的下拉菜单项（一切缩小在一起）。它也比它的父母更大（更宽）。 –

你可能在你的CSS中有一些其他样式的填充/边距。使用开发工具栏来检查你为什么得到它并删除必要的东西。 – Dekel

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

来源

2017-02-14 16:20:01

使下拉菜单项的大小始终与其父项大小相同？ （Bootstrap＆CSS）

回答

相关问题

使下拉菜单项的大小始终与其父项大小相同？（Bootstrap＆CSS）