ドロップダウンメニュー項目を常に親と同じサイズにしますか？ （ブートストラップとCSS）

Question

私は、ホバー上のドロップダウンメニューを備えたナビゲーションバーを持っています。私は、ドロップダウンメニューの項目を親と同じサイズにしたいと思います。ここで

は絵です：

だから私は、少なくとも幅の面で「これはドロップダウンである」とまったく同じサイズを（持っている今、「ワン」&「二」たいと思います）。今は少し大きすぎます。ウィンドウのサイズを変更すると、親要素（ "This is a dropdown"）のサイズが変更され、 "One" & "Two"はそのままサイズ変更されます。

コード

私は基本的に、このように構成されている様々な要素とナビゲーションバーがあります。

<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

あなたは.dropdown-content a要素からpaddingを削除する必要があります。

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

Answer 2

はあなたの.dropbtnと.dropdown:hover .dropdown-contentでwidth: 100%;を追加してみてください。これは、すべての要素を親の幅に設定する必要があります。