html - 为什么我的 Twitter Bootstrap 表单字段会溢出使用流体容器的井？

Question

更新:问题演示在这里:http://jsfiddle.net/fdB5Q/embedded/result/

从大约 767px 到 998px，表单字段比包含井宽。

小于 767px，整个表单区域换行。浏览器窗口宽度约为 200px 时呈现的页面完美显示。表单字段会像您预期的那样缩小。

为了视觉效果，请看这个非常相似的问题: Twitter Bootstrap CSS static-fluid form positioning

这是 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>

这是 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>

我想我误解了框架的某些部分。我不应该使用液体容器吗？我做错了什么？我可以拼凑一些东西来解决这个问题，但我认为问题可能是我做错了大局。

我尝试将跨度更改为 7 和 5，但仍然出现相同的错误。我尝试了 6 和 6，但那时页面开始看起来很荒谬。其余的答案对我来说没有意义。

我将输入类别从 xlarge 改为 large。它仍然有一个溢出的宽度范围，如果显示器上有空间，我真的想要更宽的表单字段。

我想避免水平滚动条，并且我希望页面文本在智能手机的横向或纵向模式下大小相同。

更新:图片

我的问题页面:

简化版:

浏览器宽度为 200 像素的简化版本:

Answer 1

输入html标签及其对应的.input-*样式只设置了css width。这是设计使然。

但是添加一个 css max-width:100% 将确保控制过大的输入。
例如将此添加到您的头部:

<style>
    input {
        max-width: 100%;
    } 
</style>