为什么我的Twitter Bootstrap表单字段使用流体容器溢出？(Why do my Twitter Bootstrap form fields overflow their well using fluid container?)

 更新：演示的问题在这里： http : //jsfiddle.net/fdB5Q/embedded/result/ 
 
 从约767像素到998像素，格式字段比包含的好。 
 
 小于767像素，整个表格区域转向新行。 当浏览器窗口大约200px宽时，渲染的页面完美显示。 表单字段按照您的预期缩小。 
 
 对于一个视觉，看这个非常相似的问题： Twitter Bootstrap CSS静态流体形式定位 
 
 这是头脑中的一切： 
 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 
 这是身体中的一切： 
 
<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>
 
 我认为我误解了框架的一部分。 我不应该使用流体容器吗？ 我究竟做错了什么？ 我可以扔一些东西来解决这个问题，但我认为问题可能是我做错了大局。 
 
 我尝试将我的跨度改为7和5，仍然有相同的错误。 我尝试了6和6，但在那一刻，页面开始看起来很荒唐。 其余答案对我来说没有意义。 
 
 我将输入类更改为大而不是xlarge。 它仍然有一个宽度范围，它溢出，我真的想要更宽的表单字段，如果有显示的空间。 
 
 我想避免水平滚动条，我希望在我的智能手机上的页面文字在风景或portait模式下是相同的大小。 
 
 更新：图片 
 
 我的问题页面： 
 
 
 简体版本： 
 
 
 200px浏览器宽度的简化版本： 
 

UPDATE: Demo of problem here: http://jsfiddle.net/fdB5Q/embedded/result/
 
From about 767px to 998px, the form fields are wider than the containing well.
 
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.
 
For a visual, look at this very similar question: Twitter Bootstrap CSS static-fluid form positioning
 
Here's everything in the Head:
 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 
Here's everything in the Body:
 
<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>
 
I think I am misunderstanding some part of the framework. Should I not be using a fluid container? What am I doing wrong? I could throw together something to fix this, but I think the problem may be that I am doing something wrong big picture.
 
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.
 
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.
 
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. 
 
UPDATE: Pictures
 
My problem page:
 
 
Simplified version:
 
 
Simplified version at 200 px browser width:
 

原文：https://stackoverflow.com/questions/11855086