title: input field in horizontal form in bootstrap modal overflows out of bounds
body: <p>Simple horizontal form, the input form fields overflow out of bounds when display size is large. As you shrink the display, it seems to fall back into bounds. How do I ensure it stays within bounds?</p>
  
  <p>Also, I cannot seem to get the label and field to line up next to each other.</p>
  
  <p>See my fiddle <a href="http://jsfiddle.net/5bkncazz/" rel="nofollow">http://jsfiddle.net/5bkncazz/</a></p>
  
  <pre><code>&lt;button type="button" id="btn-request-endorsement" class="btn btn-default" aria-hidden="true" data-toggle="modal" data-target="#modal-request-endorsement"&gt;Request Endorsement&lt;/button&gt;
    &lt;div id="modal-request-endorsement" class="modal fade" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
    &lt;h4 class="modal-title"&gt;Send an email requesting endorsement&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="modal-body form-horizontal"&gt;
  
      &lt;div id="endorsement-form-container" class="container"&gt;
  
        &lt;form class="form-horizontal" role="form"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="email"&gt;Email:&lt;/label&gt;
            &lt;input type="email" class="form-control" id="email" placeholder="Enter email of endorser" /&gt;
            &lt;label for="msg"&gt;Message:&lt;/label&gt;
            &lt;input type="text" class="form-control" id="msg" placeholder="Enter a personalized message" /&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Send Email&lt;/button&gt;
  
        &lt;/form&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.modal-content --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;
  </code></pre>