为什么我的Twitter Bootstrap表单字段溢出使用stream体容器？
更新：这里的问题演示： http : //jsfiddle.net/fdB5Q/embedded/result/
从大约767px到998px，表单域比包含的域宽。
小于767px，整个表单区域转移到一个新的行。 当浏览器窗口大约200px时呈现的页面完美显示。 表单字段缩小，如你所期望的。
对于视觉效果，请看这个非常相似的问题： Twitter Bootstrap CSS静态stream体表单定位
这是头脑中的一切：
<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>
我认为我误解了框架的某些部分。 我应该不使用stream体容器吗？ 我究竟做错了什么？ 我可以把一些东西放在一起来解决这个问题，但是我认为这个问题可能是我做了错误的大事情。
我试图改变我的跨度7和5，仍然有相同的错误。 我尝试了6和6，但在这一点上，页面开始显得荒谬。 其余的答案对我来说没有意义。
我将input类更改为大而不是xlarge。 它仍然有一个溢出的宽度范围，如果在显示屏上有空间的话，我真的很想要更宽的表单域。
我想避免水平滚动条，我希望我的智能手机上的横向或纵向模式的页面文字大小相同。
更新：图片
我的问题页面：
简化版本：
200 px浏览器宽度的简化版本：
input的html标签及其对应的.input-*样式只设置CSS width 。 这是devise。
但是增加一个css max-width:100%将确保太大的input被控制。
比如把这个添加到你的头上：
<style> input { max-width: 100%; } </style>
通常我更喜欢在class="span12"的元素中使用另一个class="row-fluid"和class="spanX"来获得某个元素的100％的宽度。 这不会导致不同的分辨率的错误。 所以，我已经在span4类的元素中添加了另一个row-fluid类，并在新的row-fluid添加了span12 div。 你必须重写默认的Bootstrap设置来获得你所需要的，所以我在<input />元素中添加了类.my-input来获得100％的宽度，并且删除左边和右边的填充（填充会导致右边的错误） 。 这里是代码：
<div class="container-fluid"> <div class="row-fluid"> <div class="span8"> <p>Some Content.</p> </div> <div class="span4 well"> <div class="row-fluid"> <div class="span12"> <label class="control-label" for="name">Your Name</label> <input type="text" class="my-input" name="name" id="name" maxlength="100" /> </div> </div> </div> </div> </div>
和CSS类覆盖
.my-input { width: 100%; padding: 4px 0 4px 0 !important; }
你可以看到和Jsfiddle演示 ，尝试调整屏幕大小。
我刚刚遇到了这个问题，并检查引导文档的表单input它声明'使用相对大小类如.input大或匹配您的input到网格列大小使用.span *类。
我的引导行被设置为span9的内容和侧边栏的span3。 设置<input class='span3'/>解决了我的问题，input框保留在边<input class='span3'/> ，因为屏幕缩小了。
在玩这些FOREVER（看来）之后只是一点点的input。 我使用一个简单的宽度属性，并将其设置为85％和95％之间取决于容器，填充和其他CSS因素，以防止input字段实际伸展到容器的边缘。
.input-example { width: 90%; }
我不是这个专家！ 我只是提供我所学到的东西，请不要把这个作为一个经验丰富的开发人员的build议。 试图回馈一个在无数场合拯救了我的生命的社区。
不幸的是，这个问题比所有这些都更危险。 使用最大宽度对我没有任何帮助。 我讨厌看起来很糟糕的事情，所以我挖了一点
它归结为一个表单控件的css声明中的这三行：
width: 100%; padding: 6px 12px; border: 1px solid #cccccc;
当设置文本types的input元素的宽度时，水平填充和边框将被添加到100％，而不是从中取出。 所以，如果100％的宽度w是500px，那么文本input表单控件的宽度变成w + 12 + 12 + 1 + 1,526px。 额外的26px是一个常量，这意味着除非宽度百分比dynamic地以100％*（w /（w + 26px））或100％-26px计算，否则事情将永远不会出现。
我个人认为这是html / css接口的定义或实现中的一个错误（我不知道是哪个，我真的不想在标准的stream沙中find引用）。如果你例如input字段将是100％的宽度，那么需要应用校正来使边缘内的宽度为100％，而不是100％，而不包括水平填充和边框宽度。
顺便说一下，百分比值或固定大小并不重要， 他们也是26px。 你需要从宽度中滤除这26px。
尽pipe如此，至less如果您使用允许客户端计算的CSS编译器，所有这些都不会丢失。 比如说less一些
input.form-control[type=text] { width: calc(~'100%-26px'); }
将会使这一切变得更好。 请注意，电子邮件和密码types（至less）也有同样的问题。
当然，26px是一种很脆弱的东西，但是常量被硬编码到forms控制声明中，所以你的双手是捆绑在一起的。 一个testing将是很好的，检查控制的大小控制在抓取引导升级CSS声明的变化，但不是今晚，谢谢。
正如Pavlo在这个答案中所指出的那样： Twitter Bootstrap：停止input字段的扩展
使用类input-block-level代替inputxlarge（或其他大小）也解决了这个问题。
我用表单input和面板体来解决这个问题。 我在下面的项目中回答了这个问题： Twitter Bootstrap：停止input字段
对我来说问题在于表单溢出。 这使投入效仿。 通过固定窗体的最大宽度（最大宽度：100％），我可以修复input以及可能放置在窗体内的任何其他内容。
