title: Dynamic width for twitter bootstrap dropdown menu?
body: <p>I am working on a new layout for my ASP.Net site and am taking advantage of the twitter bootstrap but can not get the dropdown menu working 100%. I have a menu labled "Media" and when you click on the submenu pops down like it should but the width of the submenu does not expand it's width dynamicly to fit all the text in 1 line. You can see what I am talking about by going to <a href="http://ffinfo.azurewebsites.net/webform1.aspx" rel="nofollow">http://ffinfo.azurewebsites.net/webform1.aspx</a>. If you look at the Media drop out the final menu option should be on one line but since the menu is not dynamicly adjusting it's width the last menu item is forced to 3 lines. How can I make the submenu dynamicly adjust it's width  so that it can fit that 3rd option all in one line? Here is the code I am using to generate that menu:</p>
  
  <pre><code>&lt;div class="column-main"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="navbar main-nav"&gt;
                      &lt;div class="navbar-inner"&gt;
                          &lt;ul class="nav"&gt;
                              &lt;li&gt;
                                  &lt;a href="http://www.ffinfo.com/"&gt;
                                      &lt;i class="icon-home"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                                      &lt;asp:Literal ID="lblSiteTitle" Text="&lt;%$Resources:Navigation, Site%&gt;" runat="server" /&gt;
                                      &lt;b class="caret"&gt;&lt;/b&gt;
                                  &lt;/a&gt;
  
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;
                                          Temp
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
  
                              &lt;li class="divider-vertical" /&gt;
  
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                                      &lt;asp:Literal ID="lblMediaTitle" Text="&lt;%$Resources:Navigation, Media%&gt;" runat="server" /&gt;
                                  &lt;/a&gt;
                                  &lt;b class="ceret"&gt;&lt;/b&gt;
  
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li class="nav-header text-center"&gt;
                                          &lt;asp:Literal ID="lblFanTitle" Text="&lt;%$Resources:Navigation, Fan%&gt;" runat="server" /&gt;
                                      &lt;/li&gt;
  
                                      &lt;li class="nav-header text-center"&gt;
                                          &lt;asp:Literal ID="lblMediaSubTitle" Text="&lt;%$Resources:Navigation, MediaSub%&gt;" runat="server" /&gt;
                                      &lt;/li&gt;
  
                                      &lt;li class="nav-header text-center"&gt;
                                          &lt;asp:Literal ID="lblTest" Text="&lt;%$Resources:Navigation, Chronicles%&gt;" runat="server" /&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>