title: Bootstrap dropdown menu width with right-aligned glyphicons
body: <p>I have a dropdown menu from the navbar and it has right-aligned (css class pull-right) glyphicons. One of the menu items is a bit longer than the others and it runs into the glyphicon, causing it to be moved down a half-line:</p>
  
  <p><a href="https://i.stack.imgur.com/nXPBK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXPBK.png" alt="enter image description here"></a></p>
  
  <p>I can obviously set the width of this dropdown manually with a CSS class and a hardcoded width, but I'd rather get Bootstrap to incorporate the glyphicon width appropriately. How do I need to structure my HTML or what changes to CSS do I need to make to make this work?</p>
  
  <p>Here's the HTML for the entire navbar:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="/"&gt;
              &lt;span&gt;
                  &lt;img id="XXX-brand-logo" alt="Brand" src="/Content/Images/XXX.png" width="20" height="20"&gt;&lt;/span&gt;
              Home
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-left"&gt;
              &lt;li&gt;
                  &lt;a href="/XXX"&gt;XXX&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;XXX&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="/XXX"&gt;XXX&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/XXX"&gt;XXX&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;XXX&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="/XXX/XXX"&gt;XXX&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/XXX/XXX"&gt;XXX&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Admin&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="/Admin/Role/ManageRoles"&gt;Manage Roles&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Admin/Group/ManageGroups"&gt;Manage Groups&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Admin/User/ManageUsers"&gt;Manage Users&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Administrator&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="/Account/Account/Settings"&gt;Settings &lt;span class="glyphicon glyphicon-wrench pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Account/Account/ChangePassword"&gt;Change Password &lt;span class="glyphicon glyphicon-lock pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Account/Login/Logout"&gt;Logout &lt;span class="glyphicon glyphicon-log-out pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's any CSS that could possible modify this page:</p>
  
  <pre><code>body {
      padding-top: 50px;
      padding-bottom: 20px;
  }
  
  /* Set padding to keep content from hitting the edges */
  .body-content {
      padding-left: 15px;
      padding-right: 15px;
  }
  
  .glyphicon-hover {
      border-radius: 25px;
      border: 1px solid transparent;
      padding: 2px;
  }
  
  .glyphicon-hover:hover, .glyphicon:focus {
      border-radius: 5px;
      border: 1px solid black;
      color: red;
  }
  </code></pre>
  
  <p>I'm using jquery-ui.css (version 1.11.4 via jQuery.UI.Combined in Nuget) and  bootstrap.css (version 3.3.6.1 via Nuget).</p>