title: Bootstrap <select> width, content too wide when resizing window
body: <p>How can i make the dropdown the size to fit the content (in my case it happens when shrinking the browser to less than some certain size, then content start to dissapear? I preferably do not want any custom css, anything built in to bootstrap to support this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate&gt;
  &lt;div class="well"&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-xs-3 control-label"&gt;&lt;strong&gt;4.&lt;/strong&gt;&amp;nbsp;Select thing&lt;/label&gt;
      &lt;div class="col-xs-2"&gt;
          &lt;select class="form-control"&gt;
              &lt;option&gt;Short
              &lt;/option&gt;
              &lt;option&gt;Medium lenght
              &lt;/option&gt;
              &lt;option&gt;Much much much longer text not fitting when resizing
              &lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>