title: How to make Bootstrap header item and dropdown-menu the same width?
body: <p>I have this header in my Bootstrap template:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              //Some unrelated stuff
          &lt;/div&gt;
  
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  //Some unrelated stuff          
              &lt;/ul&gt;
  
              &lt;ul class="nav navbar-nav pull-right-custom"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;DDButtonText &lt;strong class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          Test
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. I tried setting min-width to dropdown-menu but it was different for each browser. It was alright in my Firefox but Chrome and other browsers showed a little different sizes.</p>
  
  <p>How do I make my menu be the same size as the button regardless of browser, always?</p>