title: Bootstrap Login page gets broken on some screen sizes
body: <p>I tried to create a demo page with bootstrap but on some sizes it acts weird. Probably I am missing some key aspects of bootstrap, or maybe its a bug :) Can you give me some advice here?
  The problem seems to caused by the form / field itself. Tried to add some spans etc but did not work either. The layout gets worse in 1024x768 :D The input fields gets off the container.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"&gt;
  &lt;!-- HTML5 shim for IE backwards compatibility --&gt;
  &lt;!--[if lt IE 9]&gt;
        &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="page-header"&gt;
    &lt;h1 class="text-center"&gt;Welcome&lt;/h1&gt;&lt;/div&gt;
  
  &lt;div class="container-fluid"&gt;
  &lt;div class="row-fluid"&gt;
  
  &lt;div class="span4 offset4 well"&gt;
    &lt;form class="form-horizontal"&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Please login&lt;/legend&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label"&gt;User name&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input id="textinput" name="textinput" class="input-xlarge" required type="text"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label"&gt;Password&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input id="passwordinput" name="passwordinput" class="input-xlarge" required type="password"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label"&gt;&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;button id="giris" name="giris" class="btn btn-primary"&gt;Login&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
    &lt;p class="muted"&gt;This is a demo login page &lt;a class="text-error" href="#"&gt;click here&lt;/a&gt; for more info.&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
  
      &lt;div class="row-fluid"&gt;
        &lt;div class="span4 offset4 well"&gt; &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt; 
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>