title: Bootstrap dropdown - value makes the width too big
body: <p>I'm using Bootstrap and I have two dropdowns next to each other, something like this:</p>
  
  <p>|Dropdown1|  |Dropdown2|</p>
  
  <p>I have some values in dropdown1 that have lots of characters and I don't want them to disturb the width as soon as they are pressed. How can I do that ?</p>
  
  <p>Here is my dropdown</p>
  
  <pre><code> &lt;div class="dropdown"&gt;
                          &lt;div class="btn-group" id="storeId"&gt;
                              &lt;button class="btn btn-default dropdown-toggle" type="button"
                                      data-toggle="dropdown"&gt;
                                  Tutorials
                                  &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="menu1"&gt;
                                  &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;HTML Tutorial&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;CSS Tutorial&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;JavaScript Tutorial&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                                  &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>