使下拉菜單項的大小始終與其父項大小相同？（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）