Wie man Bootstrap-Header-Element und Dropdown-Menü die gleiche Breite machen?

Question

Ich habe diesen Header in meiner Bootstrap-Vorlage:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      //Some unrelated stuff 
     </div> 

     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       //Some unrelated stuff   
      </ul> 

      <ul class="nav navbar-nav pull-right-custom"> 
       <li class="dropdown"> 
        <a href="" class="dropdown-toggle" data-toggle="dropdown">DDButtonText <strong class="caret"></strong></a> 
        <ul class="dropdown-menu"> 
         Test 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Was ich versuche zu tun, um das Dropdown-Menü, was die gleiche Breite wie die ‚DDButtonText‘ zu machen. Ich habe versucht, Min-Width zu Drop-Down-Menü, aber es war für jeden Browser anders. Es war in meinem Firefox in Ordnung, aber Chrome und andere Browser zeigten ein wenig unterschiedliche Größen.

Wie mache ich mein Menü die gleiche Größe wie die Schaltfläche unabhängig von Browser, immer?

Answer 1

können Sie versuchen, das Hinzufügen dieses:

CSS:

.nav .dropdown-menu{ 
    width: 100%; 
    min-width: inherit; 
} 

Bootply: http://www.bootply.com/MfkTjxasD7