title: Why do my Twitter Bootstrap form fields overflow their well using fluid container?
body: <p>UPDATE: Demo of problem here: <a href="http://jsfiddle.net/fdB5Q/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/fdB5Q/embedded/result/</a></p>
  
  <p>From about 767px to 998px, the form fields are wider than the containing well.</p>
  
  <p>Smaller than 767px and the entire form area shifts to a new line. The page rendered when the browser window is about 200px wide displays perfectly. The form fields shrink as you would expect.</p>
  
  <p>For a visual, look at this very similar question:
  <a href="https://stackoverflow.com/questions/11706019/twitter-bootstrap-css-static-fluid-form-positioning">Twitter Bootstrap CSS static-fluid form positioning</a></p>
  
  <p>Here's everything in the Head:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /&gt;
  &lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" /&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here's everything in the Body:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
  &lt;div class="row-fluid"&gt;
  
  &lt;div class="span8"&gt;
  &lt;p&gt;Some Content.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="span4"&gt;
    &lt;div class="well"&gt;    
      &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="name"&gt;Your Name&lt;/label&gt;
        &lt;div class="controls"&gt;
        &lt;input type="text" class="input-xlarge" name="name" id="name" maxlength="100" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>I think I am misunderstanding some part of the framework. Should I not be using a fluid container? What am I doing wrong?</strong> I could throw together something to fix this, but I think the problem may be that I am doing something wrong big picture.</p>
  
  <p>I tried changing my spans to 7 and 5 and still had the same error. I tried 6 and 6, but at that point the page started to look ridiculous. The rest of the answers didn't make sense to me.</p>
  
  <p>I changed the input class to large instead of xlarge. It still had a width range where it overflowed, and I really would like wider form fields if there is room on the display.</p>
  
  <p>I want to avoid the horizontal scroll bar, and I want the page text to be the same size in landscape or portait mode on my smartphone. </p>
  
  <p>UPDATE: Pictures</p>
  
  <p><strong>My problem page:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/isXAj.png" alt="problem page"></p>
  
  <p><strong>Simplified version:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/GdhGp.png" alt="simple version"></p>
  
  <p><strong>Simplified version at 200 px browser width:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/csxCL.png" alt="simple version at 200px width"></p>