更新:问题演示在这里: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 像素的简化版本:
最佳答案
输入html标签及其对应的.input-*
样式只设置了css width
。这是设计使然。
但是添加一个 css max-width:100%
将确保控制过大的输入。
例如将此添加到您的头部:
<style>
input {
max-width: 100%;
}
</style>
关于html - 为什么我的 Twitter Bootstrap 表单字段会溢出使用流体容器的井?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11855086/