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

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

从大约767像素到998像素，表单字段的宽度大于包含井的范围。

小于767像素，整个表格区域会换行。当浏览器窗口约为200px宽时呈现的页面可以完美显示。表单字段会按预期收缩。

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

这就是头脑中的一切:

<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。它仍然有一个溢出的宽度范围，如果显示器上有空间，我真的希望有更大的表单字段。

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

更新:图片

我的问题页面:

简化版:

浏览器宽度为200 px时的简化版本:

最佳答案

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

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

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

关于html - 为什么我的Twitter Bootstrap表单字段使用流体容器溢出了？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11855086/