title: How to trim Bootstrap dropdown menus to fit contents?
body: <p>I have limited website coding experience. I'm trying to implement bootstrap into my site, specifically by creating a navbar with it. It is working great except for when I lick the login button for the dropdown menu, the menu appears far too wide for the content. I used a css stylesheet to align the username and password forms to the right of the dropdown menu but there is still too much whitespace to the left of the forms.</p>
  
  <p>For instance, I would much rather it trim down to the beginning of the 'newsletters' button.</p>
  
  <p>Site can be found here: <a href="http://minimonstertruck.com/Tyler/" rel="noreferrer">my_test_site</a></p>
  
  <p>Code:</p>
  
  <pre><code>            &lt;li&gt;&lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;Login &lt;b class = "caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;div class = "dropdown-menu dropdown-menu-right"&gt;
                      &lt;div class="container"&gt;
                          &lt;form class="form-inline" role="form" id="username"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="username"&gt;Username:&lt;/label&gt;
                                      &lt;input type="username" class="form-control" id="email" placeholder="username"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group" id="password"&gt;
                                      &lt;label for="pwd"&gt;Password:&lt;/label&gt;
                                      &lt;input type="password" class="form-control" id="pwd" placeholder="password"&gt;
                                  &lt;/div&gt;
                                  &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>