title: Bootstrap dropdown menu does not position correctly
body: <p>When I place a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", the dropdown menu appears in the original un-centered position of the dropdown.  The dropdown doesn't seem to know that its triggering button has been moved.</p>
  
  <p>The issue is represented in this jsfiddle:</p>
  
  <p><a href="https://jsfiddle.net/dkent600/wyos4ukt">https://jsfiddle.net/dkent600/wyos4ukt</a></p>
  
  <p>The fiddle contains the following code:</p>
  
  <pre><code>&lt;div style="background-color:grey; text-align:center"&gt;
      &lt;div class="dropdown"&gt;
          &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
              Dropdown
              &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for any clues for how to fix this.</p>